title: How to conditionally render extra form options on checking dynamically generated check boxes in React?
body: <p>can anyone help, i'm trying this in React but i'm really stuck.</p>
  
  <p>I have 3 checkboxes on a child component that i have rendered dynamically using an array of options in state (in the parent component):</p>
  
  <p>What i need to be able to do is, as per the below image: click on each checkbox and get further options.</p>
  
  <p><a href="https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/d/3/d385407399b0fa130741e653c9650ff9953282df.png" rel="nofollow noreferrer">https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/d/3/d385407399b0fa130741e653c9650ff9953282df.png</a></p>
  
  <p>The checked options and the sub options (not just dropdowns, the third checkbox has input fields) all need to be available in state so i can collect them up and post them to a database</p>
  
  <p>What i have so far is the below: </p>
  
  <p>Array of options in state:</p>
  
  <pre><code>sowType: [
          "ProductSow",
          "Teradata Customer SOW",
          "Custom Professional Services SOW"
        ]
  </code></pre>
  
  <p>Final rendered checkboxes:</p>
  
  <p><a href="https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/4/5/45702836b84abe764917f4bdf5172258f4d3e39c.png" rel="nofollow noreferrer">https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/4/5/45702836b84abe764917f4bdf5172258f4d3e39c.png</a></p>
  
  <p>My problem is, i don't know what to do next. I have dynamically rendered the initial 3 check boxes but i don't know how to add the conditional rendering to get the sub boxes to appear on clicking the check boxes) and add the info selected from them to state.</p>
  
  <p>i.e. can i only add the conditional rendering on checkboxes that have NOT been dynamically rendered from map or is there a way to do it, in which case how is it done?</p>
  
  <p>My code so far is as below, it may not be the best setup for what i am trying to do:</p>
  
  <p>Can anyone help??</p>
  
  <p>This is the reference to the component in the parent with the props passed down:</p>
  
  <pre><code>&lt;SowType
              title={"SOW Type"}
              setName={"SOW Type"}
              subtitle={"What type of SOW do you want to generate?"}
              type={"checkbox"}
              controlFunc={this.handleSOWTypeCheckbox}
              options={this.state.sowType}
              selectedOptions={this.state.sowTypeSelectedOption}
            /&gt;
  </code></pre>
  
  <p>This is the child component dynamically rendering the array of items from state:</p>
  
  <pre><code>    class SOWType extends React.Component {
    render() {
      // console.log(this.props);
      return (
        &lt;div className="form-group"&gt;
          &lt;label htmlFor={this.props.name} className="form-label"&gt;
            {this.props.title}
            &lt;h6&gt;{this.props.subtitle}&lt;/h6&gt;
          &lt;/label&gt;
          &lt;div className="checkbox-group"&gt;
            {this.props.options.map(option =&gt; {
              return (
                &lt;label key={option}&gt;
                  &lt;input
                    className="form-checkbox"
                    name={this.props.setName}
                    onChange={this.props.controlFunc}
                    value={option}
                    checked={this.props.selectedOptions.indexOf(option) &gt; -1}
                    type={this.props.type}
                  /&gt;
                  {option}
                &lt;/label&gt;
              );
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>This is the method i am currently using in the parent when a checkbox is clicked in the child component (this basically takes the selected option from the array in state and puts the checked options into another array in state called 'sowTypeSelectedOption: [ ]',</p>
  
  <pre><code>handleSOWTypeCheckbox(e) {
      const newSelection = e.target.value;
      let newSelectionArray;
  
      if (this.state.sowTypeSelectedOption.indexOf(newSelection) &gt; -1) {
        newSelectionArray = this.state.sowTypeSelectedOption.filter(
          item =&gt; item !== newSelection
        );
      } else {
        newSelectionArray = [...this.state.sowTypeSelectedOption, newSelection];
      }
      this.setState(
        {
          sowTypeSelectedOption: newSelectionArray
        } /*() =&gt;
        console.log("sow Type Selection: ", this.state.sowTypeSelectedOption) */
      );
    }
  </code></pre>