title: How can I navigate through a list using arrow keys in react?
body: <p>I am modifying an existing react application where I display a list, and would like to navigate through the list using the up/down arrow keys. Right now, I can't seem to get the onKeyDown event to fire when I place it in the div.</p>
  
  <p>Before anybody tags as duplicate, I have looked through related questions and can't seem to work the solutions into my own code - they don't work for me. I was most recently trying to follow the accepted answer <a href="https://stackoverflow.com/questions/42036865/react-how-to-navigate-through-list-by-arrow-keys">here</a> and was able to get event to register when I add to an input div tag, but not on its own.
  I've placed it in a few different div tags to try to get it in the right spot, but nothing seems to work for me. </p>
  
  <p>I tried adding the following to the div tags below: 
  <code>onKeyDown={() =&gt; console.log("keyPressed"}</code> I've also tried adding tabIndex="0" but I get an error about assigning a string to a number. </p>
  
  <pre><code>return(
       &lt;BaseLayout&gt;
           &lt;div className="top-container"&gt;
           &lt;div id="primary-view"&gt;
           &lt;myList className="custom-list-a" items={allListItems} /&gt;
  )
  
  
  </code></pre>
  
  <p>There are other elements on the page, I'd like to just be iterating through my list with the up and down arrow keys. (I have a separate irrelevant function called onKeyPressed that will increment the index etc, I'm just needing the event to be responded to.)</p>
  
  <p>Thanks in advance.</p>