title: Change color of selected element - React
body: <p>I'm new to React. 
  I'm trying to change the color of one particular "li" that was selected, but instead it changes color of all "li". </p>
  
  <p>Also when another "li" is clicked I want the first "i" to be not active again.</p>
  
  <p>here is the code:  <a href="http://codepen.io/polinaz/pen/zNJKqO" rel="noreferrer">http://codepen.io/polinaz/pen/zNJKqO</a></p>
  
  <pre><code>var List = React.createClass({
    getInitialState: function(){
      return { color: ''}
    },
    changeColor: function(){
      var newColor = this.state.color == '' ? 'blue' : '';
      this.setState({ color : newColor})
    },
  
    render: function () {
      return (
        &lt;div&gt;
          &lt;li style={{background:this.state.color}} onClick={this.changeColor}&gt;one&lt;/li&gt;
           &lt;li style={{background:this.state.color}} onClick={this.changeColor}&gt;two&lt;/li&gt;
           &lt;li style={{background:this.state.color}} onClick={this.changeColor}&gt;three&lt;/li&gt;
  
  
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(
      &lt;List/&gt;,
      document.getElementById('app')
  );
  </code></pre>