title: Highlighting one object at a time with React
body: <p>I'm pretty new to both React and Javascript, and I've started learning it by building a simple collapsible menu. It works as expected, except for that I can't figure out how to only highlight one item at a time. I suspect that the onClick method and state has to be owned by a higher level class than the sectionItem, but I'm really stuck in how to make this work. My first instinct would then be to iterate over all items in the menu every time something is clicked, and make sure that all other items are switched to active=false.</p>
  
  <p>Is this the right way to think about this? Could someone explain how states work in React in this context, and how I should implement it here?</p>
  
  <p>The entire code is available here: <a href="http://codepen.io/aerugo/pen/gpeQaJ">Menu on codepen.io</a></p>
  
  <p>This is the code for the item I want to make highlightable. I've not yet been able to implement that only one item should be highlighted at once.</p>
  
  <pre><code>var SectionItem = React.createClass({
    handleClick: function(){
      if(!this.state.active) {
        this.setState({
          currentItem: this,
          active: true,
          class: "sectionitem active"});
      }
    },
    getInitialState: function(){
       return {
         active: false,
         class: "sectionitem"
       }
    },
    render: function() {
      return (
          &lt;div className={this.state.class} onClick={this.handleClick}&gt;{this.props.title}&lt;/div&gt; 
      );
    }
  });
  </code></pre>