title: React: How to navigate through list by arrow keys
body: <p>I have build a simple component with a single text input and below of that a list (using semantic ui).</p>
  
  <p>Now I would like to use the arrow keys to navigate through the list. </p>
  
  <ul>
  <li>First of all I have to select the first element. But how do I access a specific list element?</li>
  <li>Second I would get the information of the current selected element and select the next element. How do I get the info which element is selected?</li>
  </ul>
  
  <p>Selection would mean to add the class <code>active</code> to the item or is there a better idea for that?</p>
  
  <pre><code>export default class Example extends Component {
      constructor(props) {
          super(props)
          this.handleChange = this.handleChange.bind(this)
          this.state = { result: [] }
      }
      handleChange(event) {
          // arrow up/down button should select next/previous list element
      }
      render() {
          return (
              &lt;Container&gt;
                  &lt;Input onChange={ this.handleChange }/&gt;
                  &lt;List&gt;
                      {
                          result.map(i =&gt; {
                              return (
                                  &lt;List.Item key={ i._id } &gt;
                                      &lt;span&gt;{ i.title }&lt;/span&gt;
                                  &lt;/List.Item&gt;
                              )
                          })
                      }
                  &lt;/List&gt;
              &lt;/Container&gt;
          )
      }
  }
  </code></pre>