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})
}

Tholle · Accepted Answer · 2018-06-13 19:01:36Z

5

You have to get sidedrawer from your state:

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

answered Jun 13, 2018 at 19:01

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bruno Mazzardo · Accepted Answer · 2018-06-13 19:02:43Z

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, 2018 at 19:02

Bruno Mazzardo

1,5861 gold badge15 silver badges27 bronze badges

3 Comments

Bruno Mazzardo Over a year ago

Take a look here stackoverflow.com/questions/50837670/… or here reactjs.org/docs/state-and-lifecycle.html to understand better

Alwaysblue Over a year ago

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})   }

Bruno Mazzardo Over a year ago

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

Collectives™ on Stack Overflow

toggling boolean value in stateful component

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related