title: React-Bootstrap onClick triggers accumulate(?) and execute many times on checkbox
body: <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>