title: Binding onClick for each Component in a .map() function
body: <p>I have a created a parent component <code>PicturesFetch</code> that renders another (children) component, <code>Picture</code> which renders a div with a picture inside. Now, to render <code>Picture</code>, <code>PicturesFetch</code> goes through an object (pics) and with a .map() function creates multiple divs with images inside. I want to be able to change the state of each element created separately. Here is what I tried so far, the tested binds were tried one by one, not all together:</p>
  
  <p><strong>PictureFetch.js</strong></p>
  
  <pre><code>class PicturesFetch extends React.Component {
  constructor(props) {
      super(props);
          this.state = { 
              isSelected: true,
              pictureClassName: "picture-div green",
              pics : [/*Object witch contains names and src of the images*/]
          };
      this.handlePictureClick = this.handlePictureClick.bind(this); /*#1 tested bind*/
  }
  handlePictureClick (isSelected){
      if (!isSelected) {
          this.setState({
              isSelected: true,
              pictureClassName: "picture-div green"
          })
      } else {
          this.setState({
              isSelected: false,
              pictureClassName: "picture-div none"
          })
      }
  }
  render() {
      var changeClass = this.state.pictureClassName;
      var handlePictureClick = this.handlePictureClick.bind(this); /*#2 tested bind*/
      var pics = this.state.pics.map(function(pic, i){
          if (/*something*/) {
              return (
              &lt;div className="pic-div" key={i} &gt;
                  &lt;Picture 
                      isSelected={isSelected}
                      pictureClassName={changeClass}
                      onClick={handlePictureClick.bind(this, isSelected)} /*#3 tested bind*/
                  /&gt;
              &lt;/div&gt;
              });
          } 
      return (
      &lt;div className="Options-container"&gt;
          &lt;div className="container"&gt;{pics}&lt;/div&gt;
      &lt;/div&gt;
      );
  }}
  </code></pre>
  
  <p><strong>Picture.js</strong></p>
  
  <pre><code>class Picture extends React.Component  {
  constructor(props) {
      super(props);
          this.state = { 
              isSelected: true,
              pictureClassName: "picture-div green" 
          };
  }
  render() {
      var pictureClassName = this.props.pictureClassName;
      return (
          &lt;div onClick={this.props.onClick} className={pictureClassName}&gt;
              &lt;img src={this.props.src} alt={this.props.name} /&gt;
              &lt;h5&gt;{this.props.name}&lt;/h5&gt;
          &lt;/div&gt;
      )
  }}
  </code></pre>
  
  <p>I simplified my code for the example. Now, by placing the bind in positions #1 and #2 changes <strong>all</strong> the images state together, while in #3 gives me the error <strong>Cannot read property 'setState' of undefined</strong>. </p>
  
  <p>Which is the correct place to bind the onClick function so I can access each image state separately? Maybe my structure is flawed? Thank you in advance.</p>