title: How to handle state of multiple buttons with react?
body: <p>I have a bootstrap grid where each grid item is populated from an array of objects but after each grid item I would like to have a vote button. How could I achieve this with maintaining state on each button separately, ie when button 1 is clicked the text should change from 'vote' to 'voted' whilst the others remain as 'vote'.</p>
  
  <p>At the moment when a button is clicked, all of them change to 'Voted'</p>
  
  <pre><code>class Items extends Component {
      constructor(props) {
          super(props);
          this.state = { hasVoted: false };
  
          this.OnClick = this.OnClick.bind(this);
      }
  
      OnClick() {
          this.setState(prevState =&gt; ({
              hasVoted: !prevState.hasVoted
          }));
      }
  
      render() {
          const Item = teasers.items.map(item =&gt;
              &lt;Col key={item.nid}&gt;
                  &lt;span&gt;
                      {itemType}
                  &lt;/span&gt;
  
                  &lt;a href={item.path}&gt;
                      &lt;Image src={item.image.src} title={item.productType} /&gt;
                      &lt;span&gt;
                          {item.Title}
                      &lt;/span&gt;
                      &lt;div className={teasersStyle.copy}&gt;
                          {" "}{item.Copy}&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
  
                  &lt;div
                      className={this.state.hasVoted ? "active" : "notactive"}
                      onClick={this.OnClick}
                  &gt;
                      {this.state.hasVoted ? "Voted" : "Vote"}
                  &lt;/div&gt;
              &lt;/Col&gt;
          );
          return (
              &lt;div&gt;
                  &lt;Grid&gt;
                      &lt;Row&gt;
                          {Item}
                      &lt;/Row&gt;
                  &lt;/Grid&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Items;
  </code></pre>