Use State to Toggle an Element 5

JavaScript
1

Tell us what’s happening:
So here I am, stuck on this lesson. I looked at the solution in the “Get A Hint” button, but it didn’t help me at all. It keeps popping up an error. What did I do wrong to make it look like an error?

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() {
  if (this.state.visibility == true) {
    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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.80 Safari/537.36 Avast/75.0.1447.81.

Link to the challenge:

2

It looks like you got messed up closing off the braces “{ }”. You should have the same amount of “{” as you do “}”.

3

I still don’t understand, sadly. I’m trying to get the correct amount, but it’s hard to figure out how many are needed. This is my new code:

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 == true) {
    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>
      );
    }
  }
};

What am I missing now?

4

Try to indent things just a tiny bit more carefully, it’s easier to see where the issue is when the else is on a new line:

toggleVisibility() {
  if (this.state.visibility == true) {
      this.setState({
        visibility: false
      });} else {
        this.setState({
          visibility: true
        }

toggleVisibility() {
  if (this.state.visibility == true) {
    this.setState({ visibility: false });
  } else {
    this.setState({ visibility: true }

setState is a function, and you don’t have a closing bracket on it

else doesn’t have a closing curly bracket.

The whole toggleVisibility function doesn’t have a closing bracket.

Also, there is the negation operator ! which flips true/false. !true is false and !false is true.

this.state.visibility is a boolean, so is either true or false.

Therefore:

this.setState({visibility: !this.state.visibility})

Would flip the visibility to true if it was false, or false if it was true