React - Show/Hide multiple divs from different check boxes

Question

I am new in react, I have certain domain in JS, I imagine this is a simple question but I have been searching for 2 hours and I haven't found a satisfactory answer :(

I have the check boxes:

<Col md="4">
  <FormGroup>
    <Label>Have Children</Label>
    <CustomInput type="radio" name="customRadio" label="Yes" value="yes" />
    <CustomInput type="radio" name="customRadio" label="No" value="no" />
  </FormGroup>
</Col>
<Col md="4">
  <FormGroup>
    <Label>Have Spouse</Label>
    ...(same as children input)
  </FormGroup>
</Col>
<Col md="4">
  <FormGroup>
    <Label>Have Family Members</Label>
    ...(same as children input)
  </FormGroup>
</Col>

If you click on "have children" I want that some divs after, related to children, to be displayed. If not, they should be hidden. And the same for the other options.

I want to know what is the cleanest way to do this.

Answer 1

The checkbox should toggle a boolean in state.

You then conditionally render the children if the value in state is true.

So attach a checked value and change handler to your groups:

      <FormGroup>
        <Label>Have Children</Label>
        <CustomInput type="radio" name="customRadio" label="Yes" value="yes" onChange={() => this.handleChange} checked={this.state.visibility} />
        <CustomInput type="radio" name="customRadio" label="No" value="no" onChange={() => this.handleChange} checked={!this.state.visibility}/>
      </FormGroup>

The create the state value in your class and toggle it with the handleChange method

state = {visibility: false}

handleChange = () => this.setState({visibility: !this.state.visibility})

Then you can conditionally render your thing based on the visibility boolean, so...

<div>{this.state.visibility && <p>Now You see me</p>}</div>

Answer 2

Just think of the data structure beforehand.

From your question, I assume you simply want something like this:

1. If children checkbox is checked, show elements related to children
2. If spouse checkbox is checked, show elements related to spouse .
3. etc.

The way I see it, you need an array of checkboxes with each of their statuses (checked or not). You can store this information in the component state.

// in the constructor
this.state = {
  checkboxes: [
    { id: 1, label: 'children', checked: false },
    { id: 2, label: 'spouse', checked: false },
  ],
}

Then, in your render() function, you just need to loop through the array like this:

const { checkboxes } = this.state;

return (
  <div>
    {checkboxes.map((checkbox, index) => (
      <div>
        <label>{checkbox.label}</label>
        <input type="checkbox" checked={checkbox.checked} onClick={() => this.toggleCheckBox(index)} />
        {checkbox.checked && <div>show this if the checkbox is checked</div>}
      </div>
    ))}
  </div>
);

Just remember to implement this.toggleCheckBox method in the class. If you are unsure of how to do it, here's a codesandbox for you to check out.