CodStak Weekly Challenge #2: Fix Color Pallet Bug

Can you fix the bug so that user can create a Gradient Generator that dynamically updates a preview box based on the user-selected colors.

Hey coders👨🏽‍💻👩🏽‍💻,

This week’s challenge is how React manages state. There is a defect in the question and your job is to fix it.

To give you a hint, there’s a defect in this part of the code:

onChange={(event) => {
   colors[index] = event.target.value;
   setColors(colors)
}}

By solving this defect, you will learn how state management works differently for array data types than other primitive data types ( like string, boolean etc ).

And if you want to go into deep, also learn how objects are compared with each other differently in JavaScript than primite data types.

Here is the description of the challenge:

Description:

In this challenge, you'll create a Gradient Generator that dynamically updates a preview box based on the user-selected colors. Users will input colors using color pickers, and the gradient preview will reflect their choices in real-time.

Requirements:

Display a preview box that shows the gradient. Use an array of colors stored in a state to generate the gradient. Provide color pickers for users to select the colors in the gradient. The gradient should dynamically update as users change colors. Write clean, reusable code for updating state and rendering components.

That’s all from this week’s challenge.

Were you able to fix last week’s challenge? If you have any questions or concerns, leave a message below.

---

Have fun coding!!

If you feel like any of your friends would benefit from this newsletter, please share it with them as well.