title: react counter for each item of list
body: <p>I'm trying to create a counter for each item in a list in React. I want each to be incremented or decremented individually depending on what the user clicks on. This issue is that all counters increment and decrement on click 
  of a single element, but I would like only the clicked element's counter to change.</p>
  
  <p>this is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>class name extends Component {
  
      constructor(){
          super()
  
          this.state = {
            news: [],
            voteing: 0
          }
      }
  
      onVoting(type){
          this.setState(prevState =&gt; {
             return {voteing: type == 'add' ? prevState.voteing + 1: prevState.voteing- 1}
          });
      }
  
      render() {
        return (
          &lt;React.Fragment&gt;
            &lt;Content&gt;
              {
                this.state.news.map((item, i)=&gt;{
                  return (
                  &lt;Item key={i}&gt;
                    &lt;text&gt;
                      {item.subject}
                      {item.details}
                    &lt;/text&gt;
                    &lt;Votering&gt;
                      &lt;img src="" onClick={this.onVoting.bind(this, 'add')} /&gt;
                      &lt;div value={this.state.voteing}&gt;{this.state.voteing}&lt;/div&gt;
                      &lt;img src="" onClick={this.onVoting.bind(this, 'min')} /&gt;
                   &lt;/Votering&gt;
                  &lt;/Item&gt;
                  )
                })
              }
            &lt;/Content&gt;
          &lt;/React.Fragment&gt;
        )
      }
    }
  </code></pre>
  
  <p>I'm trying to do this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;img src="" onClick={this.onVote(i).bind(this, 'add')} /&gt;
  </code></pre>
  
  <p>but it doesn't work also tried <code>this.onVote(item.i)</code> and same result</p>