CODEWITHSUNDEEP
javascriptreactjslocal-storage
Angela Inniss
Angela Inniss

Reputation: 359

react toggle returns wrong state on initial state change

I want to toggle my state rememberMe when the user checks the rememberMe checkbox.

The initial state is false; when I click I want it to turn to true so that I can set another condition, however this does not happen.

The prop rememberMe remains false on first click then changes to true on second click.

Does anyone know why this is?

code:

state = {
orderForm: {
  email: {
        elementType: "input-email",
        elementConfig: {
          type: "email",
          placeholder: "Your E-Mail"
        },
        value: this.props.email || "",
        validation: {
          required: true
        },
        valid: this.props.email ? true : false,
        touched: false
      },
},
 rememberMe: false

}

input

   return (
            <Input
              inputtype={formElement.config.elementType}
              key={formElement.id}
              elementType={formElement.config.elementType}
              elementConfig={formElement.config.elementConfig}
              value={formElement.config.value}
              invalid={!formElement.config.valid}
              shouldValidate={formElement.config.validation}
              touched={formElement.config.touched}
              changed={event => this.inputChangedHandler(event, formElement.id)}
              rememberMe={this.state.rememberMe}
              checkboxChanged={this.handleCheckboxChange}
            />
          );

function to change toggle:

  handleCheckboxChange = event => {
    this.setState((previousState) => {
      return {rememberMe: !previousState.rememberMe}
    });
    console.log(this.state.rememberMe);

    // setting local storage for email
    const email = this.state.orderForm.email.value;
    const rememberMe = this.state.rememberMe;
    localStorage.setItem("rememberMe", rememberMe);
    localStorage.setItem("email", rememberMe ? email : "");
  };```

Upvotes: 0

Views: 1051

Answers (2)

Jagrati
Jagrati

Reputation: 12222

In react the state updates are asynchronous. So when doing this.setState react does not guarantee that it will update the state immediately. That's the reason this.state.rememberMe will not have new value inside handleClick function. Best way is to use current state to determine the value and use it.

So inside handleClick function you can do this:

  handleCheckboxChange = event => {
    const rememberMe = !this.state.rememberMe; // storing the required value in a variable
    this.setState((previousState) => {
      return {rememberMe: !previousState.rememberMe}
    });

    // setting local storage for email
    const email = this.state.orderForm.email.value;
    localStorage.setItem("rememberMe", rememberMe);
    localStorage.setItem("email", rememberMe ? email : "");
  };```

Please checkout out the following setState documentation.

Upvotes: 1

Byron Jones
Byron Jones

Reputation: 745

Remember that setState is asynchronous, so changes you make to state will not be applied until some time after handleCheckboxChange fires. So console.log(this.state.rememberMe) won't echo your state updates, as it seems you are expecting.

Upvotes: 1

Related Questions