title: How to make List Items clickable individually from one another in react.js
body: <p>I am trying to make each individual list item clickable.
  Here I have a color change state so that the color changes to red. But everytime I click one list item, it makes all of the boxes red. Again I want to select which ones to turn red, not turn all of them red. a hint in the right direction or a link would do fine.</p>
  
  <pre><code> import React, { Component } from 'react';
      import './App.css';
      import MainTool from './components/Layout/MainTool/MainTool.js';
      import Aux from './hoc/Aux.js';
  
      class App extends Component {
  
        state = {
          MainList: [
            "GamePlay",
            "Visuals",
            "Audio",
            "Story"
          ],
          color: "white"
        }
  
        changeEle = () =&gt;{
          this.setState({color : "red"});
        }
  
        render() {
          return (
            &lt;Aux&gt;
              &lt;MainTool MainList = {this.state.MainList}
              change = {this.changeEle}
              color = {this.state.color}/&gt;
            &lt;/Aux&gt;
          );
        }
      }
  
      export default App;
  </code></pre>
  
  <p>This MainTool just shoots my state arguments to Checkblock. Just for reference. Its unlikely the error is here although I have been wrong plenty times before.</p>
  
  <pre><code>import React from 'react';
  import './MainTool.css';
  import CheckBlock from '../../CheckBlock/CheckBlock';
  
  const MainTool = props =&gt; {
      return (
          &lt;div className = "mtborder"&gt;
              &lt;CheckBlock MainList = {props.MainList}
              change = {props.change}
              color = {props.color}/&gt;
          &lt;/div&gt;
      );
  };
  
  export default MainTool;
  </code></pre>
  
  <p>And here is my best guess at where the problem is. I used a loop to iterate through my state object array and print out the list and divs next to each list item. the divs being the elements I want to make clickable individually.</p>
  
  <pre><code>import React from 'react';
  import './CheckBlock.css';
  import Aux from '../../hoc/Aux';
  
  const CheckBlock = props =&gt; {
  
  console.log(props.change);
  console.log(props.color);
  
      let mainList = [];
  
      for(let i = 0; i &lt;= 3; i++)
      {
          mainList[i] = &lt;li key = {i} 
          className = "nameBox"&gt;{props.MainList[i]}
          &lt;div onClick = {props.change} 
          style = {{backgroundColor: props.color}} 
          className = "clickBox"&gt;&lt;/div&gt;&lt;/li&gt;
      }
  
      //console.log(dubi());
  
      return (
          &lt;Aux&gt;
              &lt;ul className = "mainList"&gt;{mainList}&lt;/ul&gt;
              &lt;button&gt;Enter&lt;/button&gt;
          &lt;/Aux&gt;
      );
  };
  
  export default CheckBlock;
  </code></pre>