React state challenge


Dont really have a clear understanding of state and how to solve this, although current code passes 4 out of 5 tests, I am pretty sure it is wrong, any tips or article  or previous lesson suggestions welcome

**Your code so far**
      
```jsx

class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    visibility: false
  };
  // change code below this line
this.setState((state, props) => ({
visibility: state.visibility
}));
  // 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/79.0.3945.117 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

Per the instructions:

Currently, there is no way of updating the visibility property in the component’s state . The value should toggle back and forth between true and false.There is a click handler on the button which triggers a class method called toggleVisibility() .

This means you need to create a method named toggleVisibility that toggles the value of the visibility property of the component’s state.

Hint: Don’t forget to bind the this keyword to the method in the constructor!

As you have already learned in previous React challenges, you need to bind this to the method you create above.

Thanks Randell, I’ll try that out