title: How to make a function dynamic in react?
body: <p>I'm able to create a list with multiple checkboxes and select all option. <a href="https://codesandbox.io/s/flamboyant-fast-m23pu?file=/src/index.js" rel="nofollow noreferrer">Thanks to this answer</a>
  Now I have a requirement to make this handleChange function dynamic so that I can reuse this function for multiple state lists. Any help would be appreciated.</p>
  <pre><code>this.state = {
  list1: [
          { name: &quot;item1&quot;, isChecked: true },
          { name: &quot;item2&quot;, isChecked: true },
          { name: &quot;item3&quot;, isChecked: true }
        ]
      };
  </code></pre>
  <pre><code>&lt;input
            type=&quot;checkbox&quot;
            name=&quot;checkAll&quot;
            checked={this.state.allChecked}
            onChange={(e) =&gt; this.handleChange(e, 'list1')}
  /&gt;
  </code></pre>
  <pre><code>handleChange = (e, listName) =&gt; {
      let itemName = e.target.name;
      let checked = e.target.checked;
      this.setState((prevState) =&gt; {
        let { list1, allChecked } = prevState;
        if (itemName === &quot;checkAll&quot;) {
          allChecked = checked;
          list1 = [listName].map((item) =&gt; ({ ...item, isChecked: checked }));
        } else {
          list1 = [listName].map((item) =&gt;
            item.name === itemName ? { ...item, isChecked: checked } : item
          );
          allChecked = [listName].every((item) =&gt; item.isChecked);
        }
        return { list1, allChecked };
      });
    };
  </code></pre>