React: use-state-to-toggle-an-element

[littlegreengoblin]

I would like to suggest adding this variant to the “solutions” because if(!foo) {} is a very useful short construct to use.
!foo will return true for every “falsy” value (empty string, 0 , null , false , undefined , NaN )

Summary

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(state => {
    if(!state.visibility){
      return {visibility:true}
    }else {
      return {visibility:false}
    }
  })
}
  // 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>
      );
    }
  }
}

[JeremyLT]

Hello there.

Thank you, for your contribution. For future contributions, please wrap your solution within :

[details]
```
code goes here...
```
[/details]

Also, provide all of the necessary code to pass the challenge.

Also, when you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[JeremyLT]

Please provide a link to the challenge you are referring to. Thanks

[littlegreengoblin]

Hello Jeremy,
Thanks for your time, I’m sorry that I was in a hurry and wasted your time on “styling” T_T
This is a challenge I was referring to

freeCodeCamp.org

[JeremyLT]

Thanks,

To me it looks like Solution 2 shows this idea more compactly?

[littlegreengoblin]

Yeah, it’s more compact. I wasn’t trying to add the shortest version, but add “next” level for the new user to see. Right now we have a “basic if statement” and “endgame if statement”
I think the use of if(!argument) is somewhere in the “middle” of “how hard is it to read/understand” for a person who’s looking at this for the first time