React-Bootstrap onClick triggers accumulate(?) and execute many times on checkbox
<p>What I'm experiencing is what seems like onClick listeners accumulating across renders and firing more and more times as I toggle a checkbox.</p>

<p>I'm mapping over an array to generate the checkboxes, like this:</p>

<pre><code>  const list = permissions[cat].map((p) =&gt; {
    // map the role's permissions to the checked state of the "all" permission checkboxes
    const checked = _.findWhere(role.permissions, {id: p.id}) ? true : false;

    return &lt;CheckBox key={p.id}
                     checked={checked}
                     label={p.operation}
                     onChange={e =&gt; this.togglePermission(p.id)} /&gt;;
  });
</code></pre>

<p>the checkbox looks like this:</p>

<pre><code>const CheckBox = ({ checked, label, onChange }) =&gt; (
  &lt;Input
          checked={checked}
          type="checkbox"
          label={prettyPrint(label)}
          onChange={onChange} /&gt;
);
</code></pre>

<p>and <code>this.togglePermssion</code> looks like this:</p>

<pre><code>togglePermission(id) {
  this.props.togglePermissionOnRole(id);
}
</code></pre>

<p>What's happening is that when I toggle a checkbox, the redux action is dispatched and the component is re-rendered. When I toggle a checkbox again (the same or another), <code>this.togglePermission</code> is called again multiple times. As I toggle more checkboxes, the amount of times it's executed seems to grow exponentially.</p>

<p>Any ideas as to why this behaviour happens?</p>