React - Use State to Toggle an Element

Tell us what’s happening:

I am receiving this error message again. I switched to using chrome. It was working fine until this error message came up on the console. : / console output
act(…) is not supported in production builds of React, and might not behave as expected.

Not sure what’s going on.

Your code so far

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false
    };
    // Change code below this line
this.toggleVisibility = this.toggleVisibility.bind(this);
    // Change code above this line
  }
  // Change code below this line
  toggleVisibility() {
    this.setState((state => ({ visibility: !state.visibility })));
  }
  // 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 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

React - Use State to Toggle an Element

  • it seems some kind of a glitch…. try refreshing browser and give it a go once again
  • your attempt to this step is correct and should pass.

happy coding :slight_smile: