title: React nested components with checkboxes
body: <p>I have a website that contains more than a dozen components.<br><br> Each parent component contains about 5 other components. Each 5 components contains a form. <br> Parent components has 3 checkboxes. <br><br>1: Expand all components in that offer (expand all), <br>2: assign everything in that component (assign all), <br>3: Expand the component (expand product).<br><br> Each child component has two checkboxes.<br><br>1: Expand the component (also expand product),<br> 2: assign everything from the component (also assign all). <br><br>All of these options works on a state change. They all work correctly. The problem is that when I click parent checkbox, I can not deselect the child's single component. So I can not uncheck the checkbox inside child's component (child's expand product or child's assign all)</p>
  
  <p><a href="https://i.stack.imgur.com/ba8ZS.jpg" rel="nofollow noreferrer">closed components</a><br>
  <a href="https://i.stack.imgur.com/PzACz.jpg" rel="nofollow noreferrer">expand product on parent</a><br>
  <a href="https://i.stack.imgur.com/zMmx1.jpg" rel="nofollow noreferrer">expand product in parent, expand product in child</a><br>
  <a href="https://i.stack.imgur.com/8lpz3.jpg" rel="nofollow noreferrer">expand all in parent,triggers expand product in parent and it triggers expand product in childs component</a>
  <br><br></p>
  
  <p>here's first file that renders parent component :</p>
  
  <pre><code> class Offer extends React.Component {
   constructor(props){
      super(props);
  
      this.state = {
          checkedItems: new Map()
      };
  
      this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(e) {
      const item = e.target.name;
      const isChecked = e.target.checked;
  
      this.setState(prevState =&gt; ({
          checkedItems: prevState.checkedItems.set(item, isChecked)
      }));
  }
  
  render(){
      const { data, country_offer, country_offer_tab, countries, } = this.props;
  
      return (
          &lt;div className="offer-wrapper"&gt;
              &lt;div className={"offer-header " + data[2] }&gt;
                  &lt;div&gt;
                      &lt;div className="custom_checkbox"&gt;
                          &lt;div className="custom_checkbox"&gt;
                              &lt;input
                                  type={"checkbox"}
                                  name={`${data[2]}_expand_all`}
                                  className="expand_all"
                                  checked={this.state.checkedItems.get(`${data[2]}_expand_all`) || false}
                                  onChange={this.handleChange}
                                  id={`${data[2]}_expand_all`}
                              /&gt;
                              &lt;label htmlFor={`${data[2]}_expand_all`}&gt;Expand all&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div className="custom_checkbox"&gt;
                              &lt;input
                                  type={"checkbox"}
                                  name={`${data[2]}_assign_all`}
                                  className="assign_all"
                                  checked={this.state.checkedItems.get(`${data[2]}_assign_all`) || false}
                                  onChange={this.handleChange}
                                  id={`${data[2]}_assign_all`}
                              /&gt;
                              &lt;label htmlFor={`${data[2]}_assign_all`}&gt;Assign all products&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div className="custom_checkbox"&gt;
                              &lt;input
                                  type={"checkbox"}
                                  name={`${data[2]}_expand_product`}
                                  className="expand_product"
                                  checked={( this.state.checkedItems.get(`${data[2]}_expand_product`) || this.state.checkedItems.get(`${data[2]}_expand_all`) ) || false}
                                  onChange={this.handleChange}
                                  id={`${data[2]}_expand_product`}
                              /&gt;
                              &lt;label htmlFor={`${data[2]}_expand_product`}&gt;Expand product&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              {
                  (this.state.checkedItems.get(`${data[2]}_expand_all`) || this.state.checkedItems.get(`${data[2]}`+'_expand_product'))  &amp;&amp;
                      &lt;CountryOffer
                          country_offer_tab={country_offer_tab}
                          countries={countries}
                          data={data}
                          expand_all={this.state.checkedItems.get(`${data[2]}_expand_all`)}
                          expand_product={this.state.checkedItems.get(`${data[2]}_expand_product`)}
                          assign_all={this.state.checkedItems.get(`${data[2]}_assign_all`)}
                      /&gt;
              }
          &lt;/div&gt;
      )
  }
  }
  
  export default Offer;
  </code></pre>
  
  <p>and here is child component</p>
  
  <pre><code>class CountryOffer extends React.Component{
  constructor(props){
      super(props);
  
      this.state = {
          checkedItems: new Map(),
      };
  
      this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(e) {
      if (!this.props.expand_all){
          const item = e.target.name;
          const isChecked = e.target.checked;
  
          this.setState(prevState =&gt; ({
              checkedItems: prevState.checkedItems.set(item, isChecked)
          }));
      } else {
          console.log('cant uncheck/check this')
      }
  }
  
  render(){
      const { country_offer_tab, countries, data, expand_all, expand_product, assign_all} = this.props;
      return (
          &lt;div className={"offer-details " + data[2]}&gt;
              {country_offer_tab[data[2]].map((country, k) =&gt; {
                  return (
                      &lt;div key={k}&gt;
                          &lt;div className="offer-country-header" &gt;
                              &lt;div&gt;
                                  &lt;span className={"iti-flag "+(countries[k].symbol).toLowerCase()}/&gt;
                                  &lt;span&gt;{countries[k].name}&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;div className='custom_checkbox'&gt;
                                  &lt;input
                                      checked={assign_all ? assign_all : (this.state.checkedItems.get(`intersections_for ${data[2]}|${countries[k].id}`) || false)} onChange={this.handleChange}
                                      type="checkbox"
                                      name={"intersections_for "+ data[2] + '|' + countries[k].id}
                                      id={"intersections_for "+ data[2] + '|' + countries[k].id}/&gt;
                                  &lt;label className="intersections_group_label" htmlFor={"intersections_for "+ data[2] + '|' + countries[k].id}&gt;Check/uncheck all&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div className='custom_checkbox'&gt;
                                  &lt;input
                                      checked={expand_all ? expand_all : (this.state.checkedItems.get(`expand_geo ${data[2]}|${countries[k].id}`) || false)} onChange={this.handleChange}
                                      type="checkbox"
                                      name={"expand_geo " + data[2] + '|' + countries[k].id}
                                      id={"expand_geo " + data[2] + '|' + countries[k].id}/&gt;
                                  &lt;label htmlFor={"expand_geo "+ data[2] + '|' + countries[k].id}&gt;Expand GEO&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          {
                              (expand_all || this.state.checkedItems.get(`expand_geo ${data[2]}|${countries[k].id}`)) &amp;&amp;
                                  &lt;CountryOfferIntersections
                                      country_offer_tab={country_offer_tab}
                                      offer_id={data[2]}
                                      country_id={countries[k].id}
                                      check_all={this.state.checkedItems.get(`intersections_for ${data[2]}|${countries[k].id}`)}
                                      assign_all={assign_all}
                                      expand_product={expand_product}
                                  /&gt;
                          }
                      &lt;/div&gt;
                  )
              })}
          &lt;/div&gt;
      )}
  }
  
   export default CountryOffer;
  </code></pre>
  
  <p>I will be grateful for any help</p>