Button doesn't generate gradient on first click

JavaScript
1

Hi there, I created a side project (gradient generator) using react… But the only problem I have now is that, the generate button won’t generate gradient colors on the first click but it gets generated on the second click.

You can test it out through the link below:

Live site: https://coloree.netlify.app/

Repository: https://github.com/FesoQue/gradeo-gradient-generator

2

what a nicely project you have chosen to work on Dev.

however, i tried to Clicked the generate button but i couldn’t see an effect.
though, when i change the position the gradient effect.

3

That’s where the problem lies… You have to click the generate button twice to see an effect… Can you have a look at my code and see what I got wrong?

4

Add handleColors to the useEffect dependencies array. Then wrap the handleColors function in a useCallback and add the two dependencies clrList1 and clrList2 to its dependencies array. Doing that makes it work as expected for me.

Also, you should see a warning about the missing dependency. I also see another one about the select element in the console

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

Edit: just in case you need example code here is a Codesandbox with the changes I suggested.

5

Hey @lasjorg , your example code was helpful, thanks.

Also as a self learning amateur who is trying to master react, do you have a roadmap that can guide and help my journey.

Note: I have learned the following and their concept

-useState
-useEffect
-useReducer(proving stubborn )
-useRef()

1 Like
6

I don’t really have a roadmap for you. I will say reading blog posts and articles from the following resources have been helpful.

https://dmitripavlutin.com/tag/react/

And always follow the ESLint warnings, they usually point to issues that need correction (like the exhaustive-deps rule).

React is funny sometimes. You can code a bunch of stuff with no issues, and then suddenly you get some odd bug. It is often caused by how hooks work behind the scenes.

1 Like
7

Thank you , I’ll will definitely go through them all

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.