Please explain handleClick() part. Especially prevState.
1 Like
You really don’t like reading documentation, do you?
1 Like
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
setState accepts a function with the first parameter being the current state, the return value of the function will update the state.
the initial state is {isToggleOn: true} after a call to handleClick it would be {isToggleOn: false}
if the notation is confusing - in es5 would be written as
this.handleClick = function() {
this.setState(function (prevState) {
return {
isToggleOn: !prevState.isToggleOn
};
});
}
3 Likes
I read docs.But sometimes even I read them I don’t figure out what some part of code does or I am not fully understand.
Then I ask for help from more experienced developers to get me more information.
If it’s against the rules then please accept my apologies.
3 Likes
I also read the docs but I agree with you SerafirmPoch on this one, how prevState is used to check and set the value of isToggleOn.
Please find below my explanation of how prevState is being used to check and change values. I am not a programmer I have made my notes based on observation and assumption, please feel free to offer a better explanation to what this code is doing.
handleClick() {
this.setState(prevState => (
**// 1. checks for a previous state**
// In the first instance of a click it will iterate the property prevState
// since a prevState does not exist on the first click the object which is declared
// by this.state = {isToggleOn: true} the property 'isToggleOn' value now becomes false!
// The expression **{isToggleOn: !prevState.isToggleOn}** roughly translates as:
// 2. when clicked I want my value not to be the prevState value but assign the opposite to it
// or the value is not of prevState but the opposite.
{isToggleOn: !prevState.isToggleOn}
));
}
4 Likes
This post about React setState method might be helpful.
1 Like
Thanks for asking the question. As you said, sometimes we read the documentation but we need a dumystified explanation to understand better 
1 Like
you give me the priceless explanation to prevState, hats off sir
I have re-read the referenced LifeCycle Methods and the article on Functional setState. I understand that setSet( ) merges whatever object is passed to it and I understand that setSet is evaluating the key of the object passed to determine if the current state has such a key. But none of the explanations are clear to me. When I run Chrome debug tools to step through the code, prevState.isToggleOn is always ‘undefined.’ ‘NOT undefined’ could evaluate to TRUE, but how does it ever evaluate to FALSE? I know the code works when I run it, but I can’t figure out why. The problem for me – a newbie toReact – is that “prevState” is never explicitly defined in the Constructor or anywhere else. How does prevState.isToggleOn become a valid object or value passed to setSet if prevState is not defined? Does setting a property on an undefined variable in the curly braces context instantiate an object literal? Is there some implicit JavaScript or React conversion going on?
It’s an argument to a function, it represents the state, and isToggleOn is a property on the state, and the state is defined in your constructor. This works exactly the same, it could be called anything:
this.setState(dneidicnehsifndheiwodew => {
dneidicnehsifndheiwodew.isToggleOn = true
});
Like these two are the same:
function add(a,b) { return a + b }
function add(foo, bar) { return foo + bar }
Thank you for the detailed answer. I appreciate your quick response and taking the time to to to help me understand. Yes, I understand that ‘prevState’ is a parameter or argument for the function and that in the function, I can call the argument anything I choose. But I hope you can understand why a beginner learning React could be confused. In the function example you provide – function add(a, b) {return a + b) – if you don’t pass something to the function that can be added – either a number or a string – then nothing gets added and the return is empty. What I think you are saying, and what is not clear to me, is that when you call setSet() in React, more is going on than is immediately visible – the current state must somehow be passed to setState, or setState must somehow evaluate the state, and that state gets mapped to whatever you want to name the argument. If this is true, then I need to read more about how setState works in React.
OK, I figure it out. I missed something in the React tutorials. In the tutorial on State and Lifecycle, below the Clock code example, there is a set of steps that explain what’s going on behind the scenes. In step 4 – “the Clock component schedules a UI update by calling setState() with an object containing the current time.” I should have understood that “with an object” means “passes the state object.” Elsewhere, in a Medium article on Understanding ReactJS – setState, the author more explicitly states – " If you pass a function as the first argument of setState, React will call it [the function] with the at-call-time-current state and expect you to return an Object to merge into state." Thank you Dan Couper for forcing me to read more carefully,
1 Like
well that was a shitty thing to say. why be a jerk?
sometimes people like to talk things out…and that’s okay
1 Like
If you don’t like people asking questions then don’t join to any programming forum. everything is going to be explained on some sort of documentation, everything, but we still have this spaces everywhere, so you have a pointless argument.
Thanks for reaching out after 2 years just to tell me that. It’s very kind of you to lecture me about my online behavior and give me precious advice even though I haven’t asked for it.
However, I think your time might be better spent on answering present questions that someone actually asked for.
Good luck and happy Easter.