React - Use State to Toggle an Element

JavaScript
1

Why we have to use { } ? can’t we directly use JavaScript in here

Your code so far

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false
    };
    this.toggleVisibility = this.toggleVisibility.bind(this);
  }
  toggleVisibility() {
    this.setState(state => {
      if (state.visibility === true) {
         return { visibility: false };
       } else {
         return { visibility: true };
      }
    });
  }
    
  render() {
    if (this.state.visibility) {
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
          <h1>Now you see me!</h1>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
        </div>
      );
    }
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: React - Use State to Toggle an Element

Link to the challenge:

1 Like
2

I am not sure what the ask is but the reason you have to use state and not use JavaScript directly is that React uses a virtual DOM, if you mutate the value directly, the component would not re-render and React would not be aware of the changes as it’s now technically ‘beyond’ the reach of React to keep track of the value.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.