Michael Sterling
asked on
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:
But this does not work when the button is clicked:
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.
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;
But this does not 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: 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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@Chris: Thanks for taking the time to add to this discussion.
ASKER
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.