React(prevState)

React(prevState)
0.0 0

#1

Please explain handleClick() part. Especially prevState.


#2

You really don’t like reading documentation, do you?


#3
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
        };
    });
  }


#4

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.


#5

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}

));

}

#6

This post about React setState method might be helpful.

Functional setState is the future of React


#7

Thanks for asking the question. As you said, sometimes we read the documentation but we need a dumystified explanation to understand better :slight_smile: