title: React: using handleclick to toggle class of mapped element by key
body: <p>I'm going through the React documentation and trying to change the condition of one element within a map based on the click of a corresponding element (associated with the same key).  Using a handleClick that looks something like this:</p>
  
  <pre><code>handleClick: function(e) {
      this.setState({condition: !this.state.condition});
      console.log('clicked' + e);
  }
  </code></pre>
  
  <p>I have some menu items drawn this way:</p>
  
  <pre><code>return (
      &lt;li key={i}&gt;
          &lt;a
              onClick={_this.handleClick.bind(_this, i)}
              data-nav={'nav-' + el.label.en.toLowerCase()}&gt;
              {el.label.en}
          &lt;/a&gt;
      &lt;/li&gt;
  );
  </code></pre>
  
  <p>And some submenu sections whose class I want to toggle based on click of the above:</p>
  
  <pre><code>return (
      &lt;section
          className={_this.state.condition ? "active" :""}
          key={i}
          id={'nav-' + el.label.en.toLowerCase()}&gt;
          &lt;ul&gt;
              &lt;GetChildren data={el.children} /&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  );
  </code></pre>
  
  <p>Right now, obviously, when I click the first, all  elements toggle their class. For the life of me, I can't figure out how to pass the key, so that if I'm clicking on item 1, the section with key {1} gets an "active" class, and others do not.  In javascript with jquery I could get at it using the data-attribute.  I'm sure react has a simple way that I'm just not understanding.</p>