title: Reactjs : Getting active element name from <ul> in to the header
body: <p>I am trying to build a long navbar for mobile device and I am developing it in an accordion style. The first view will have currently active link name. The user when clicks on this active link name, it expands below and list out other available links.</p>
  
  <pre><code>React.createClass({
      getInitialState: function() {
          return {
            tab: false,
            navState: "nav-closed"
          }
        },
        handleClick: function() {
          if (this.state.tab) {
            this.setState({
              tab: false,
              navState: "nav-closed"
            })
          } else {
            this.setState({
              tab: true,
              navState: "nav-open"
            })
          }
        },
        render: function() {
          return (&lt;div&gt;
          &lt;div className ="navbar-container"&gt;
          &lt;div onClick = {this.handleClick}&gt;HEADER` 
            /*  (should display active element name here) */
          &lt;/div&gt;
          &lt;div className = {this.state.navState}&gt;
          &lt;ul role="nav"&gt;
                &lt;li onClick = {this.handleClick}&gt;&lt;Link activeClassName="active" to="path1"&gt;PATH 1&lt;/Link&gt;&lt;/li&gt;
                &lt;li onClick = {this.handleClick}&gt;&lt;Link activeClassName="active" to="/path2"&gt;PATH 2&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
              {this.props.children}
        &lt;/div&gt;)
        }
      })
  </code></pre>
  
  <p>In the code sample, I am trying to get the currently active link (PATH1 or PATH2) in place of "HEADER"</p>
  
  <p>Any suggestions or advice what I should be looking in to?</p>