title: React apply function to single item in array
body: <p>The following code creates a simple movie rating app. Everything works except that when an up or down vote is clicked in one of the array items, the votes state for all items in the array update, rather than just for the item that was clicked. How do I code this so that the vote only applies to the item where it was clicked?</p>
  
  <pre><code>class Ratings extends React.Component {
      constructor(props){
          super(props);
          this.state = {
              votes: 0
          };
          this.add = this.add.bind(this);
          this.subtract = this.subtract.bind(this);
          this.reset = this.reset.bind(this);
      }
      add(event){
          this.setState ({
              votes: this.state.votes + 1
          })
      }
      subtract(event){
          this.setState ({
              votes: this.state.votes - 1
          })
      }
      reset(event){
          this.setState ({
              votes: 0
          })
      }
      render () {
          this.movies = this.props.list.map(x =&gt; {
              return (
                  &lt;div key={x.id} className="movierater"&gt;
                  &lt;MoviePoster poster={x.img}/&gt;
                  &lt;h1 className="title"&gt;{x.name}&lt;/h1&gt;
                      &lt;div className="votewrapper"&gt;
                          &lt;button onClick={this.add}&gt;&lt;i className="votebutton fa fa-thumbs-o-up" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;Votes count={this.state.votes} /&gt;
                          &lt;button onClick={this.subtract}&gt;&lt;i className="votebutton fa fa-thumbs-o-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;button onClick={this.reset} className="reset"&gt;Reset&lt;/button&gt;
                  &lt;/div&gt;
              )
          });
          return (
              &lt;div&gt;
                  {this.movies}
              &lt;/div&gt;
          );
      }
  }
  
  function MoviePoster(props) {
      return (
          &lt;img src={props.poster} alt="Movie Poster" className="poster"/&gt;
      );
  }
  
  function Votes(props) {
      return (
          &lt;h2&gt;Votes: {props.count}&lt;/h2&gt;
      );
  }
  
  var movieposters = [
      {id: 1, img:"http://www.impawards.com/2017/posters/med_alien_covenant_ver4.jpg", name: "Alien Covenant"},
      {id: 2, img:"http://www.impawards.com/2017/posters/med_atomic_blonde_ver4.jpg", name: "Atomic Blonde"},
      {id: 3, img:"http://www.impawards.com/2017/posters/med_easy_living_ver3.jpg", name: "Easy Living"},
      {id: 4, img:"http://www.impawards.com/2017/posters/med_once_upon_a_time_in_venice_ver3.jpg", name: "Once Upon a Time in Venice"},
      {id: 5, img:"http://www.impawards.com/2017/posters/med_scorched_earth.jpg", name: "Scorched Earth"},
      {id: 6, img:"http://www.impawards.com/2017/posters/med_underworld_blood_wars_ver9.jpg", name: "Underworld: Blood Wars"},
      {id: 7, img:"http://www.impawards.com/2017/posters/med_void.jpg", name: "The Void"},
      {id: 8, img:"http://www.impawards.com/2017/posters/med_war_for_the_planet_of_the_apes.jpg", name: "War for the Planet of the Apes"},
  ]
  
  
  ReactDOM.render(
      &lt;Ratings list={movieposters} /&gt;,
      document.getElementById('app')
  );
  </code></pre>