React: How to navigate through list by arrow keys : <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>
