title: Change active element in a list using react
body: <p>I have a list of elements created by using an array in react. On user click how can I make the clicked element active (by adding a CSS class) while making the other elements inactive (by removing the active class)?</p>
  <p>My rendering of elements looks like this.</p>
  <pre><code>   {this.props.people.map(function(person, i){
          &lt;div className='media' key={i} onClick={state.handleClick.bind(state,i,state.props)}&gt;
            &lt;item className=&quot;media-body&quot;&gt;{person.name}&lt;/item&gt;
          &lt;/div&gt;
      }
  </code></pre>
  <p>When the user clicks on one of these elements an active class will be added to the clicked 'media' element making the clicked element 'media active' while removing the 'active' class from the previously clicked element??</p>