title: React: How to change status of toggle switch inside map?
body: <p>I am trying to map a collection of keys to a list of toggle <code>&lt;Switch&gt;</code> components. The state of each toggle switch is coming from redux. When I click on the <code>&lt;Switch&gt;</code>, I expect the toggle state of the component to alternate.</p>
  
  <p>I tried to call <code>setState</code> in the <code>onChange</code> handler on the <code>&lt;Switch&gt;</code>, but its not working as expected. How can I write a function that will toggle the switch? </p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>{Object.keys(all_product).map((item, index) =&gt; {
    console.log(all_product[item]);
    let product = all_product[item];
    this.state.activevalue = product.is_active;
    let val;
  
    product.is_active == 1 ? (val = true) : (val = false);
  
    this.state = { checked: val };
  
    return (
      &lt;tr&gt;
        &lt;th scope="row"&gt;{product.id}&lt;/th&gt;
        &lt;td&gt;
          &lt;img
            src={`/img/${product.code}.jpg`}
            alt={product.name}
            class="img-fluid dataTableImg"
          /&gt;
        &lt;/td&gt;
        &lt;td&gt;{product.name}&lt;/td&gt;
        &lt;td&gt;{product.brand}&lt;/td&gt;
        &lt;td&gt;{product.quantity}&lt;/td&gt;
        &lt;td&gt;{product.unit_price}&lt;/td&gt;
        &lt;td&gt;
          &lt;Switch
            onChange={() =&gt; {
              this.setState({ checked: !val });
            }}
            checked={this.state.checked}
            value={"A"}
          /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    );
  })}
  </code></pre>