Use State to Toggle an Element (2)

JavaScript
1

Tell us what’s happening:
I’m toggling state here using toggleVisibility but still getting thrown an error about an unexpected curly brace but everything checks out on my end. Can anyone see what I’m missing?

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) {
    this.setState {
      visibility: false
    }
    else (this.state.visibility) {
      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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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

2

Well you are missing closing parentheses for if statement here.

3

this.setState on line 16 should be a function call which takes an object, like: this.setState({});

4

Can you be more specific? Should I restructure the conditional statement? If so, to what end?

5

When you debug, you should pay attention to what the console tells you is the error. When I copy/pasted your code into that challenge, I got this error (now on line 17): SyntaxError: unknown: Unexpected token, expected ; (17:18)
Those numbers mean the error is on line 17, character 18.

Capture
Capture615×525 28.4 KB

Each indent is 2 spaces, so the 18th character is the {, which means that is the “token” (word or punctuation) that the compiler can’t understand.

Functions are written according to this formula.

resultVariable = functionName(argument1, argument2);

In Javascript, you can ignore the result, so a function call can be written like:

functionName(arg1, arg2);

Now for some VERY DETAILED explanation. Read this many times until you understand everything I wrote:

setState() is a member function of the MyComponent class object. It takes a Javascript object as its one argument. JS objects have any number of property: value; pairs. If code inside the MyComponent class object has to reference itself, it must use the this keyword. So, to call the setState() function from inside MyComponent’s code, you must follow the function-calling formula as below:

this.setState(argumentObject);

which in your code’s specific case looks like:

this.setState( {visibility: false;} );

In addition, you are missing a closing curly brace for the if clause that begins on line 16 before you get to the else clause that currently is on line 20. Similarly to the first compiler error, if you don’t fix the this.setState() call on line 21, you will get another error once you fix the first.