title: React toolbox deletable chips
body: <p>I try to add many chips (<a href="http://react-toolbox.com/#/components/chip" rel="nofollow noreferrer">http://react-toolbox.com/#/components/chip</a>) but I really fail with React...</p>
  
  <p>The exemples in the link only show a single deletable chip. As long as there is a single Deletable Chip, it works, but I can't make it works with more chips.</p>
  
  <p>Here's my code :</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import Chip from 'react-toolbox/lib/chip';
  
  var Chiplist = [
      {'id': 1, 'title': 'Keyword 1'},
      {'id': 2, 'title': 'Keyword 2'},
      {'id': 3, 'title': 'Keyword 3'},
      {'id': 4, 'title': 'Keyword 4'}
   ];
  
  class ChipsList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {deleted : {1: false, 2: false, 3: false, 4: false}};
      /*for(i = 0; i &lt; Chiplist.length; $i++){
      state.deleted.i = false;
      }*/
    }
  
  
   /* for(i = 0; i &lt; Chiplist.length; $i++){
      state.deleted.i = false;
    }*/
  
    handleDeleteClick(index) {
      /*this.setState({
        deleted : {1: false, 2: true, 3: false, 4: false}
      });
      console.log(this);*/
      console.log(index);
    };
  
    render () {
      const mychips = Chiplist.map((chip, index) =&gt;
        this.state.deleted[index] ? null : ( &lt;Chip deletable onDeleteClick={this.handleDeleteClick(index + 1)}&gt;{chip.title}&lt;/Chip&gt; )
      );
      return (
        &lt;div className="chips-list"&gt;
          { mychips }
        &lt;/div&gt;
      );
    }
  }
  
  export default ChipsList;
  </code></pre>
  
  <p>Why, when I want to pass the index value to the function, the function is called all the time, I don't know why...</p>