React - Use State to Toggle an Element

JavaScript
1

Tell us what’s happening:

I dont understand a thing here, what is going on?Like i dont even know what to begin with, what is going on here?what is this? how do i change the state?why my code doesnt work?what is counter and increment?why i cant write if else statement to check if visible == true?what is bind, what and why should i bind?

Your code so far

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false
    };
    // Change code below this line
const toggleVisibility = (state, props) => {
  this.state.visibility = state.counter + props.increment;
}
    // 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/131.0.0.0 Safari/537.36 OPR/116.0.0.0

Challenge Information:

React - Use State to Toggle an Element

2

is this the first React challenge you are doing? you may want to start from the beginning

or you may want to go to the React material in the Full Stack Developer course

3

i was doing react in mimo, mobile app and there were no class like useStates, they were used as a function from what i remember, why is it different here?Friend of mine said that it is kind of out dated

4

This is outdated, yes. The content in the Full Stack Curriculum is updated instead

1 Like