@shivjoshi1996
Posted
Hey there! Good job on this one.
For the dark mode bug, I believe it is because the setState hook queues a render (and only changes it for the next render of the component), it doesn't update the state straight away, hence why you need to click the button twice.
This might be confusing to read, so I encourage you to check out the new React docs, which helped me understand this too. The specific section where this is explained is https://beta.reactjs.org/learn/state-as-a-snapshot, but I would go through the whole tutorial.
To fix it, you'll need to separate your logic of checking whether the theme is light or dark, to a useEffect() hook (https://reactjs.org/docs/hooks-effect.html) and check when the [darkmode] variable has been changed.
something like:
useEffect(() => { if (darkMode) { document.documentElement.setAttribute("data-theme", "dark"); } else if (!darkMode) { document.documentElement.setAttribute("data-theme", "light"); } }, [darkmode]);
For the issue with the max viewport , I would remove the max width on the body, and add it to the main content container instead (with how wide you want the component to go), and give it a margin: 0 auto to ensure the content stays on the middle of the screen.
Hope that helps! Reach out if anything is confusing.
Cheers
Marked as helpful
@ihatepineapple
Posted
@shivjoshi1996 Thanks! I have used useEffect before, now that you mentioned it looks like it's a perfect solution. Thanks for your feedback, I will update it as soon as I can :)