you should probably post your newest code in your reply.
(if you don’t know how, let us know…)
ps. make sure you understand how useState works.
It needs to be given a function to call when the state changes. The function has to be defined in your code. (You can refer to the React documentation if you need to understand more https://react.dev/learn/state-a-components-memory )
hi, I’m so new to React and so lost with creating this final step. I created several functions and nothing is working. can you please give me a hint on how to target the background color in my input. I thought that was my target.
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
<div id = "color-picker-container" style={{ backgroundColor:"white" }} >
What does this code do?
How do we make it interactive so it doesn’t always show a white background?
the other thing to consider what you’re doing for the onChange part of the input element.
Can you find an example from something you’ve learned in a lecture on what should go there?
(Right now, what does your code do onChange ? Try to analyze it step by step and explain it to yourself - then to us - so we can fix your understanding)
Your function does not have to target the input background, it just has to properly call the setColor. This changes your color variable you get from useState and in consequence, it changes the input background. However, for the background color change your “backgroundColor” in the “style” attribute of your “color-picker-container” element must be equal to the color variable.
The idea is that the background color depends on the variable color you get from useState, and then, you change that color through the setColor (also gotten from useState). This setColor is called in a function that triggers when the “onChange” attribute of your input element changes (that is, when you pick a color in the color picker).
I recommend you to check the workshop previous to this lab so you can see an example of that.
So, in summary:
You need to create a function that uses setColor, so the color variable changes (this function’s name might start with “handle”, for example, “handlePickColor”. This you can also see in that workshop. The function must be defined inside “export const ColorPicker”).
The onChange attribute in your input element must be equal to that function, so it calls it when its value changes.
The backgroundColor in the style attribute in your “color-picker-container” must be equal to color, so when color changes, this background changes too.
