toggling boolean value in stateful component

Question

I have a fairly simple stateful component whose value I wish to toggle whenever someone clicks on a button:

class Layout extends Component {
  state = {
    sidedrawer: false
  }

  sideDrawerCloseHandler = () => {
    this.setState({sidedrawer: false})
  }

  sideDrawerTogglerHandler = () => {
    this.setState({sidedrawer: !sidedrawer})
  }

  render () {
    return (
      <Aux>
        <Toolbar sideDrawerTogglerHandler={this.sideDrawerTogglerHandler}/>
        <SideDrawer SideDrawerOpen={this.state.sidedrawer} sideDrawerCloseHandler={this.sideDrawerCloseHandler} />
        <main className={classes.co}>
          {this.props.children}
        </main>
      </Aux>
    )
  }
}

export default Layout;

Now, when I run my react App it throws an error saying:

sidedrawer is not defined in line 19

Can someone help me in fixing and understanding the error?

The line 18 - 19 happens to be this part in my code

sideDrawerTogglerHandler = () => {
  this.setState({sidedrawer: !sidedrawer})
}

score 5 · Answer 1 · answered Jun 13 '18 at 19:01

5

You have to get sidedrawer from your state:

sideDrawerTogglerHandler = () => {
 this.setState((previousState) => {
   return {sidedrawer: !previousState.sidedrawer}
 })
}

answered Jun 13 '18 at 19:01

Tholle

108,070
19
198
189

score 3 · Accepted Answer · answered Jun 13 '18 at 19:02

3

Side drawer isn't defined, what is defined is this.state.sidedrawer, what you are seeking is

      sideDrawerTogglerHandler = () => {
           this.setState({sidedrawer: !this.state.sidedrawer})
      }

But this isn't the best way to setState, as explained on React docs, the best way to update state based on the previous state is using setState with a function that receives the prevState as a prop, you can try this instead

 sideDrawerTogglerHandler = () => {
     this.setState((prevState) => ({
      sidedrawer: !prevState.sidedrawer 
    }));
   }

answered Jun 13 '18 at 19:02

Bruno Mazzardo

1,586
1
15
27

1

Take a look here https://stackoverflow.com/questions/50837670/reactjs-setstate-previous-state-is-the-first-argument-props-as-the-second-argum/50837784#50837784 or here https://reactjs.org/docs/state-and-lifecycle.html to understand better – Bruno Mazzardo Jun 13 '18 at 19:03
Thanks for your answer. What do you think about this method (this works though but any drawbacks)? `sideDrawerTogglerHandler = () => { let sideDrawerToggler = this.state.sideDrawer; sideDrawerToggler = !sideDrawerToggler; this.setState({sidedrawer: sideDrawerToggler}) }` – Alwaysblue Jun 13 '18 at 19:06
If a person clicks twice, really fast, both sideDrawerToggler can get their value before the first setState is executed, so maybe, just maybe if he is really fast, you cant get the wrong value. That's why react suggests that way to ensure you will always have the right value – Bruno Mazzardo Jun 13 '18 at 19:08

toggling boolean value in stateful component

2 Answers2