React: Use State to Toggle an Element

JavaScript
1

Hello! My code doesn’t work and I don’t understand why. It keeps saying “Clicking the button element should toggle the visibility property in state between true and false.” I already checked some other threads but they didn’t help me.

My 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 () {
    if (this.state.visibility){
      this.setState ({ 
        visibility: false });
    } else {
        this.setState ({ 
          visbility: true})
      }
}
  // 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>
      );
    }
  }
};
2

Check your spelling.

3

wew I’m stupid, thanks!

4

i think you don’t need if else because it only has 2 conditions.
My solution is:
toggleVisibility () {
this.setState({
visibility : !this.state.visibility
});
}