Can I have a simplified explanation of how useState works?
I'm [new to / learning] react and so I'm experimenting with code samples that I find and trying to understand concepts within the language. Why does this work when the button is clicked:
import React, { useState } from 'react';const Home = props => { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); const manipulateSomeState = () => { setCount(() => (count + 1)); }; return ( <div> <p>You clicked {count} times</p> <button onClick={manipulateSomeState}> Click me </button> </div> );}export default Home;
If I can get an explanation in "laymen" (non technical) terms that would be great. Everything is the same except the "manipulateSomeState" function within the functional component. For what its worth, when I look at the first version of the manipulateSomeState function (the one that breaks/doesn't work) it seems straight forward. In my mind I'm adding 1 to the count state variable. In the second version of manipulateSomeState (the version that works), it seems like I'm having to use an anonymous function to accomplish the same thing and it appears to me that this is more/overly complicated. What am I not understanding.
Thanks in advance.
ReactJavaScriptjQuery* ReactJS
Last Comment
Michael Sterling
8/22/2022 - Mon
Michael Sterling
ASKER
After talking with a co-worker I was offered this: This code:
achieves the desired result because in both cases, its taking the current value of the count state variable and just incrementing it. Can anyone add any more depth/info to this explanation? I do understand, but I'm just looking of other ways of understanding it.
Open in new window
converts the parameter in the setCount function into an object and there for the function doesn't know what to do with it and that's why it blows up.
This code:
Open in new window
and or this code:Open in new window
achieves the desired result because in both cases, its taking the current value of the count state variable and just incrementing it. Can anyone add any more depth/info to this explanation? I do understand, but I'm just looking of other ways of understanding it.