title: How can I change the fontweight of an item at click method - React
body: <p>I have a react code below where I iterate over in an array of grocery list. I created a state change and a style variable that will change only one item at a time when clicked. </p>
  
  <p>However it did not work. For some reason when I click on one item it turns all of them bold.</p>
  
  <pre><code>const App = () =&gt; (
      &lt;div&gt;&lt;GroceryListItem /&gt;&lt;/div&gt;
  );
  
  class GroceryListItem extends React.Component{
    constructor(props){
      super(props);
    }
  
    render(){
      return (
        &lt;div&gt;&lt;GroceryList groceryItems={['Cucumber', 'Kale']}/&gt;&lt;/div&gt;
      );
    }
  }
  
  class GroceryList extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        done: false
      };
    }
  
    onClickItem(){
      this.setState({
          done: !this.state.done
        });
    }
  
   render(){
  
    var style = {
        fontWeight: this.state.done ? 'bold' : 'normal'
      };
  
     return (
      &lt;ul&gt;
        {
          this.props.groceryItems.map(item =&gt; &lt;li style={style} onClick={this.onClickItem.bind(this)} key={item}&gt;{item}&lt;/li&gt;)
        }
      &lt;/ul&gt;
  
     );
    }
  }
  </code></pre>
  
  <p>Any idea why is this not working and how to fix it? 
  PS. Suggestions on how to improve my code is appreciated.</p>