Use State to Toggle an Element React 2

JavaScript
1

Tell us what’s happening:

Hi guys, I’m having difficulties debugging this. Can someone help me with it.
The toggle button doesn’t work, i need explanation and solution if it can.
Thank you.

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 if(this.state.visibility == false)
      {
        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.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

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

2

setState is a function that takes arguments like so setState(updater[, callback]) , and not a property that receives values as you have it, change that and it will work.

Also , if I may simplify your conditional (although that is not what is causing your test to fail)

  if(this.state.visibility){
   do this...
  }
  else{
    do that...
  }

you don’t need an else if because you only have 2 conditions.

1 Like
3

Hi @Dereje1,

Thank you very much for your explanation, but i don’t understand well, could you simplify explanation more, or give me a hint or solution, so, i can understand from it.

Thank you very much again @Dereje1.

Regards,
Ali Mosaad

4

I didn’t want to give you the solution because you are already very very close, you need to change only one thing and that is how you are using setState, as I explained earlier , setState is a function that accepts arguments and not a variable or property that receives values, if I want to set the state of a property called name I would do this.setState({name:"Dereje"}), the argument I am sending to the setState function in this case is {name:"Dereje"} (note that setState also takes an optional callback argument as I mentioned previously). If you are not sure what I mean by function and arguments, then it maybe a good idea to step back and review the earlier lessons of the curriculum. Feel free to ask more questions.

5

Thank you @Dereje1 for your explanation put i am still pinned from 3 hour in same example, if you give me a solution i can understand it because i am try to fix code based on your explanation, but nothing happen.

This is latest try 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(){
      visibility: !this.state.visibility;
  }
  // change code above this line
  render() {
    if (this.state.visibility) {
      return (
        <div>
          <button onClick={this.toggleVisibility} className={this.state.visibility ? 'active' : null}>Click Me</button>
          <h1>Now you see me!</h1>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
        </div>
      );
    }
  }
};

Regards,
Ali Mosaad

6

Read this lesson below again and practice it first
https://learn.freecodecamp.org/front-end-libraries/react/set-state-with-this-setstate

Then, in the original code that you made this post for and was failing, see the difference of how you are setting the state, and how the example above sets the state. Do you see the difference ?

more clarification:
how @ali-admin sets state:
this.setState = ({visibility: false});
how the lesson above sets state:
this.setState({ username: 'Lewis' });

2 Likes
7

Thank you very much @Dereje1 for clarification, all of this because i am not concentrate, maybe i am go to sleep now.

Thank you again in advance and have a nice day.

Regards,
Ali Mosaad

8

You are welcome @ali-admin, it happens to the best of us and lack of sleep compounds the issue so no need to beat yourself up.
When you get a chance, review what I also pointed out about your usage of the if statement as well

1 Like
9

Hi @Dereje1,

I review your point about usage of the if statement, thank you very much in advance :+1:

Regards,
Ali Mosaad

1 Like
10

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(){
this.setState(prevState => ({
visibility: !prevState.visibility
}));
}

// change code above this line
render() {
if (this.state.visibility) {
return (


Click Me

Now you see me!



);
} else {
return (

Click Me

);
}
}
};
1 Like