# Clicking the button element should toggle the visibility property in state between true and false

**URL:** <https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [October 26, 2020, 2:12pm UTC](https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239 "2020-10-26T14:12:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anshcena](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anshcena/32/180774_2.png) [@anshcena](https://forum.freecodecamp.org/u/anshcena)\
**Post date:** [October 26, 2020, 2:12pm UTC](https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239/1 "2020-10-26T14:12:40Z")

</div>

**Tell us what’s happening:**  
Clicking the button element should toggle the `visibility` property in state between `true` and `false` .

getting this issue state in above line  
function toggleVisibility() isn’t returning true or false value after setting state in that!

**Your code so far**

```jsx

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 =>{
  visibility : !state.visibility
})
}
// 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/86.0.4240.111 Safari/537.36`.

**Challenge:** Use State to Toggle an Element

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/front-end-development-libraries/react/use-state-to-toggle-an-element)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![jsdisco](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jsdisco/32/179655_2.png) [@jsdisco](https://forum.freecodecamp.org/u/jsdisco)\
**Post date:** [October 26, 2020, 2:33pm UTC](https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239/2 "2020-10-26T14:33:57Z")

</div>

> [@anshcena](#):
>
> ```jsx
> toggleVisibility () {
> this.setState(state =>{
> visibility : !state.visibility
> })
> }
> 
> ```

Your setState function doesn’t return an object at the moment, because JavaScript interprets the opening curly brace (after the arrow) as the beginning of the function body. To prevent this, all you have to do is add a set of brackets to wrap your object:

```auto
toggleVisibility () {
this.setState(state =>({
  visibility : !state.visibility
}))
}

```

---

<div class="post-metadata">

**Author:** ![anshcena](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anshcena/32/180774_2.png) [@anshcena](https://forum.freecodecamp.org/u/anshcena)\
**Post date:** [October 26, 2020, 2:38pm UTC](https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239/3 "2020-10-26T14:38:17Z")

</div>

oh!  
That was bad of me!  
Thank you so much for correcting me.

---

<div class="post-metadata">

**Author:** ![martinc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/martinc/32/185703_2.png) [@martinc](https://forum.freecodecamp.org/u/martinc)\
**Post date:** [October 26, 2020, 6:17pm UTC](https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239/4 "2020-10-26T18:17:20Z")

</div>

Honestly this one is a horrible gotcha of JS!

---

<div class="post-metadata">

**Author:** ![anshcena](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anshcena/32/180774_2.png) [@anshcena](https://forum.freecodecamp.org/u/anshcena)\
**Post date:** [October 27, 2020, 6:22am UTC](https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239/5 "2020-10-27T06:22:31Z")

</div>

yeah! you are into making arrow Functions and boom you missed setState thing!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 10:38am UTC](https://forum.freecodecamp.org/t/clicking-the-button-element-should-toggle-the-visibility-property-in-state-between-true-and-false/427239/6 "2021-06-01T10:38:03Z")

</div>