title: Counter for each item in React.js
body: <p>I am trying to implement a counter for each of the elements in an array and display them on the screen. I have an array and I want to display the following for each of the elements: name of the car, likes, increase button, and decrease button. When I tried to increase and decrease the likes, all the elements gets increase and decrease the same way. How do I keep the likes independent from each other and not share the same likes? For example, when I like one car, I want only that one to increase the <code>likes</code> count. Can someone assist me with this problem? This is my current code:</p>
  
  <pre><code>import React, {Component} from 'react';
  
  class Cars extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
          likes: 0
      };
  
      this.incFav = this.incFav.bind(this);
      this.decFav = this.decFav.bind(this);
    }
  
    incFav(e) {
      this.setState({likes: this.state.likes + 1});
    }
  
    decFav(e) {
      this.setState({likes: this.state.likes - 1});
    }
  
    render() {
      //Passed this.props.cars from another component. It is an array of cars.
      const { cars } = this.props;
      return (
          &lt;div&gt;
              {cars.map((car, key) =&gt; {
                  &lt;li key={car}&gt;
                      {car}
                      {this.state.likes}
                      &lt;button onClick={this.incFav}&gt;+&lt;/button&gt;
                      &lt;button onClick={this.decFav}&gt;-&lt;/button&gt;
                  &lt;/li&gt;
              })}
          &lt;/div&gt;
      );
    }
  }
  
  export default Cars;
  </code></pre>