title: React - KeyBoard Navigation on ul li list
body: <p>I have a list of item with ul li list which build through a map function, looks like - </p>
  
  <pre><code>sizeData.map((size, index) =&gt; {
      return (
          &lt;li
              role="none"
              className="size-dropdownlist__item"
              key={sizeData.label}
              onMouseOver={() =&gt; this.sizeDataHover(size.price)}
              onFocus={() =&gt; this.sizeDataHover(size.price)}
          &gt;
              &lt;div className="size-dropdownlist__item____holder"&gt;
                  &lt;a
                      role="menuitem"
                      aria-setsize={size.length}
                      aria-posinset={index + 1}
                      tabIndex="0"
                      aria-label={size.label}
                      href={size.URL}
                      onClick={(e) =&gt; { this.onSizeDataSelect(e, size.ID); }}
                      className={
                          classNames('size-dropdownlist__item____holder--link',
                              {
                                  'holder--link-selected': size.isSelected
                              })
                      }
                  &gt;
                      {size.label}
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      })
  }
  </code></pre>
  
  <p>The HTML output like - </p>
  
  <pre><code>&lt;ul className="size-dropdownlist"&gt;
      &lt;li className="size-dropdownlist__item"&gt;
          &lt;div className="size-dropdownlist__item____holder"&gt;
              &lt;a href="#" className="size-dropdownlist__item____holder--link"&gt;A&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li className="size-dropdownlist__item"&gt;
          &lt;div className="size-dropdownlist__item____holder"&gt;
              &lt;a href="#" className="size-dropdownlist__item____holder--link"&gt;B&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li className="size-dropdownlist__item"&gt;
          &lt;div className="size-dropdownlist__item____holder"&gt;
              &lt;a href="#" className="size-dropdownlist__item____holder--link"&gt;C&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li className="size-dropdownlist__item"&gt;
          &lt;div className="size-dropdownlist__item____holder"&gt;
              &lt;a href="#" className="size-dropdownlist__item____holder--link"&gt;D&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li className="size-dropdownlist__item"&gt;
          &lt;div className="size-dropdownlist__item____holder"&gt;
              &lt;a href="#" className="size-dropdownlist__item____holder--link"&gt;E&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li className="size-dropdownlist__item"&gt;
          &lt;div className="size-dropdownlist__item____holder"&gt;
              &lt;a href="#" className="size-dropdownlist__item____holder--link"&gt;F&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Using CSS I was set it with two rows, display: flex. </p>
  
  <pre><code>|A|B|
  |C|D|
  |E|F|
  </code></pre>
  
  <p>Now I wanted to move a selected item through keyboard like - if user move mouse pointer to A and press arrow right the B will show selected and if user press arrow down then C with selected. Similarlly if user press up arrow when on C it's move to A.</p>