Use State to Toggle an Element.Samoel

JavaScript
#1

Tell us what’s happening:
I can’t understand what’s wrong with this code , why is not passing

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.toggleVisibilty.bind(this);
  // change code above this line
}
// change code below this line
toggleVisibility() {
if(this.state.visibility){
  this.setState({visibility:false})
}
else {this.setState({visibility: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>
    );
  }
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36.

Challenge: Use State to Toggle an Element

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/use-state-to-toggle-an-element

#2

  1. Check the spelling of the toggleVisibility method for the bind portion of the code.

  2. Check the requirements again.

An anonymous function should be passed to setState.

Look at the example code for how this is done.

#3

Thanks i corrected the spelling in toggleVisibility in the bind portion, then followed the second given example method: this.setState(state => ({
counter: state.counter + 1
})); and it worked.

#4