How to hide paragraph when checkbox is checked in REACTjs?

Question

I am a newbie in REACT. I created a form with a few components. In one of the components, I have a checkbox and a paragraph with text in it. I can't figure out how to hide the paragraph when the checkbox is clicked. The boolean is captured in state but not sure how to use it to do what I want.

class Anonymous extends React.Component{
  constructor(){
  super();
  this.state = {
  anon:false
}
  this.anonymousBox = this.anonymousBox.bind(this)
}

anonymousBox(event){
  this.setState({anon:event.target.checked})
}

render(){
  return(
  <span>
  <input type="checkbox" 
    name="anon" value="" 
    onChange={this.anonymousBox}
    checked={this.state.anon}
  /> Anonymous

  <p style={{backgroundColor:'yellow'}}>
    First Name: <br />
    Last Name: <br />
    Email: <br />
    Country: <br />
    Phone: <br />
  </p>
 </span>
  )
 }
}

codepen

OPearl · Accepted Answer · 2020-05-14T09:19:47.360

1

You can conditionally render the paragraph based on the state like so:

{this.state.anon && <p style={{backgroundColor:'yellow'}}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>}

This is similar (see comment by Drew below) to this style of conditional rendering:

{this.state.someBoolean ? <p>Some text</p> : null}

I.e, if a condition is met than render this piece of jsx, else don't render nothing.

Another option would be to toggle a CSS class with a display: none property. That would look something like that:

<p className={this.state.anon ? "show" : "hide"} style={{backgroundColor:'yellow'}}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>

Of course you'll need the corresponding CSS classes to make this work.
You can also use the ternary conditions inside of the inline styles:

<p style={{ backgroundColor:'yellow', display: this.state.anon ? 'block' : 'none' }}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>

In the last two options, you can substitute display: none with visibility: hidden which behaves differently.

You can read more about using the ternary operators in jsx in the React docs for conditional rendering.

Which of the options is better depends on the use case, so it's up to you!

Hope this helps and good luck!

edited May 14 '20 at 09:19

answered May 14 '20 at 08:35

OPearl

349
3
14

FYI `condition && Component` is not equivalent to `condition ? Component : null`. Consider this `dataArray.length && Component`: if the data array is empty and length 0 (falsey), then the length 0 will output to rendered result whereas using the ternary will correctly return null. – Drew Reese May 14 '20 at 09:10
Try this sandbox: https://codesandbox.io/embed/adoring-wildflower-ogorh?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark – Drew Reese May 14 '20 at 09:20
I understand the answers except ```condition && Component```. Is the component considered a boolean? – OLA May 14 '20 at 11:55
`Component` here refers to a React component or any other HTML element. Ternaries are expressions that evaluate to booleans. So `Component` have a truthy value (somewhat like non-empty strings or non-zero numbers), and if condition is `true` than `Component` is rendered because the entire expression evaluates to `true`. If condition is `false` than the entire expression evaluates to `false` and Component isn't rendered. Think of it like `true && true === true` which means render, and `false && true === false` which means do not render. – OPearl May 14 '20 at 13:23

How to hide paragraph when checkbox is checked in REACTjs?

1 Answers1

Linked