React - Use State to Toggle an Element

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

 class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false
    };
    // Change code below this line
    this.setState (state => ({
      toggleVisibility : state.toggle
    }));
    // Change code above this line
  }
  // Change code below this line

  // Change code above this line
  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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: React - Use State to Toggle an Element

Link to the challenge:

2

Inside the constructor (where you’ve written additional code already), you should only be binding your toggleVisibility method to the this keyword.
Outside of the constructor (i.e. in between the other pair of comments), you need to define the method itself, using setState.

3

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