title: How to select multiple checkbox in Accordion using react?
body: <p>How to select multiple checkboxes from accordion?</p>
  <p>I am able to select multiple checkboxes whatever I have tried so far. The only problem is when I select checkboxes from one list(<strong>List1</strong>) then select from another list(Any List) and again select from <strong>List1</strong>.</p>
  <h3>Steps to reproduce the issue</h3>
  <p><a href="https://i.stack.imgur.com/l8CPZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8CPZ.png" alt="enter image description here" /></a></p>
  <p>Can somebody help to improve the code or provide any solution/suggestion on how to do this?
  <strong>App.js</strong></p>
  <pre><code>import AccordionHeader from &quot;./AccordionHeader&quot;;
  import listData from &quot;./data&quot;;
  export default class App extends React.Component {
    state = {
      lists: listData,
      show: false,
      selectedList: {}
    };
    handleTile = (list) =&gt; {
      let getID = !this.state.lists[list.id].active;
      let update = this.state.lists.map((item) =&gt;
        item.id === list.id ? { ...item, active: getID } : item
      );
      this.setState({ lists: update, selectedList: { ...list } });
    };
    handleChange = (e) =&gt; {
      const { lists, selectedList } = this.state;
      let obj = lists?.find((filt) =&gt; filt.id === selectedList.id);
      obj.innerList.forEach((inner) =&gt; {
        if (inner.title === e.target.name) inner.completed = e.target.checked;
      });
      let toggledBoxes = lists.map((list) =&gt;
        list.id === obj.id ? { ...obj } : list
      );
      this.setState({ lists: toggledBoxes });
    };
    render() {
      const { lists } = this.state;
      return (
        &lt;&gt;
          {lists.map((ar, index) =&gt; (
            &lt;div className=&quot;heading&quot; key={index}&gt;
              &lt;AccordionHeader
                active={ar.active}
                index={index}
                onClick={() =&gt; this.handleTile(ar)}
              /&gt;
  
              {ar.active ? (
                &lt;React.Fragment&gt;
                  {ar.innerList.map((inner) =&gt; (
                    &lt;div key={inner.id}&gt;
                      &lt;input
                        type=&quot;checkbox&quot;
                        onChange={this.handleChange}
                        checked={inner.completed}
                        name={inner.title}
                        id={inner.title}
                      /&gt;
                      &lt;label&gt;{inner.title}&lt;/label&gt;
                    &lt;/div&gt;
                  ))}
                &lt;/React.Fragment&gt;
              ) : null}
            &lt;/div&gt;
          ))}
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  <p><strong>AccordionHeader.js</strong></p>
  <pre><code>export default function AccordionHeader({ active, index, onClick }) {
    return (
      &lt;div className={active ? &quot;tile is-active&quot; : &quot;tile&quot;} onClick={onClick}&gt;
        &lt;div className=&quot;left&quot;&gt;
          &lt;div&gt;
            &lt;strong&gt;{`${index}`} &lt;/strong&gt;
            &lt;span&gt;Menu&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className=&quot;right&quot;&gt;
          {!active ? 'A' : 'V'}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>data.json</strong></p>
  <pre><code>[
    {
      &quot;id&quot;: 0,
      &quot;active&quot;: false,
      &quot;innerList&quot;: [
        { &quot;id&quot;: 0, &quot;completed&quot;: false, &quot;title&quot;: &quot;List 1&quot; },
        { &quot;id&quot;: 1, &quot;completed&quot;: false, &quot;title&quot;: &quot;List 2&quot; },
        { &quot;id&quot;: 2, &quot;completed&quot;: false, &quot;title&quot;: &quot;List 3&quot; }
      ]
    },
    {
      &quot;id&quot;: 1,
      &quot;active&quot;: false,
      &quot;innerList&quot;: [
        { &quot;id&quot;: 0, &quot;completed&quot;: false, &quot;title&quot;: &quot;Item 1&quot; },
        { &quot;id&quot;: 1, &quot;completed&quot;: false, &quot;title&quot;: &quot;Item 2&quot; },
        { &quot;id&quot;: 2, &quot;completed&quot;: false, &quot;title&quot;: &quot;Item 3&quot; }
      ]
    },
    {
      &quot;id&quot;: 2,
      &quot;active&quot;: false,
      &quot;innerList&quot;: [
        { &quot;id&quot;: 0, &quot;completed&quot;: false, &quot;title&quot;: &quot;Inner 1&quot; },
        { &quot;id&quot;: 1, &quot;completed&quot;: false, &quot;title&quot;: &quot;Inner 2&quot; },
        { &quot;id&quot;: 2, &quot;completed&quot;: false, &quot;title&quot;: &quot;Inner 3&quot; }
      ]
    },
    {
      &quot;id&quot;: 3,
      &quot;active&quot;: false,
      &quot;innerList&quot;: [
        { &quot;id&quot;: 0, &quot;completed&quot;: false, &quot;title&quot;: &quot;Sub 1&quot; },
        { &quot;id&quot;: 1, &quot;completed&quot;: false, &quot;title&quot;: &quot;Sub 2&quot; },
        { &quot;id&quot;: 2, &quot;completed&quot;: false, &quot;title&quot;: &quot;Sub 3&quot; }
      ]
    }
  ]
  </code></pre>
  <p>Working Code in codeSandbox - <a href="https://codesandbox.io/s/multi-checkbox-in-accordion-5lol9?file=/src/App.js" rel="nofollow noreferrer">Multi checkbox in accordion</a></p>