ArticleZip > React How To Navigate Through List By Arrow Keys

React How To Navigate Through List By Arrow Keys

Navigating through a list of items in a React application can greatly enhance user experience and accessibility. In this guide, we'll walk you through how to implement the functionality to navigate through a list using arrow keys in your React application.

To achieve this functionality, we'll be leveraging the use of event listeners to detect key presses and updating the state of the selected item accordingly.

First, let's set up a basic React component that renders a list of items:

Javascript

import React, { useState } from 'react';

const ListComponent = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const items = ['Item 1', 'Item 2', 'Item 3'];

  const handleKeyPress = (e) => {
    if (e.key === 'ArrowUp' && selectedItem > 0) {
      setSelectedItem(selectedItem - 1);
    } else if (e.key === 'ArrowDown' && selectedItem < items.length - 1) {
      setSelectedItem(selectedItem + 1);
    }
  };

  return (
    <ul>
      {items.map((item, index) =&gt; (
        <li>{item}</li>
      ))}
    </ul>
  );
};

export default ListComponent;

In the code above, we are using the `useState` hook to keep track of the selected item index in the list. The `handleKeyPress` function listens for arrow key presses (`ArrowUp` and `ArrowDown`) and updates the selected item index accordingly.

The `onKeyDown` event listener is attached to the `

    ` element, which makes it focusable and allows it to receive key events. We set the `tabIndex` attribute to enable keyboard focus on the list.

    As users navigate through the list using the arrow keys, the `selectedItem` state is updated, causing React to re-render the list with the appropriate styling to indicate the selected item.

    When defining the list items, we dynamically apply the `selected` class based on whether the item index matches the `selectedItem` state, thus highlighting the selected item for the user.

    By following these steps, you can easily enable keyboard navigation through a list of items in your React application. This feature not only improves usability but also ensures that users can interact with your application efficiently using only the keyboard.

    Feel free to customize the implementation further to suit your specific requirements, such as adding animations or additional key bindings. Enjoy enhancing your React application with this useful navigation feature!

    Related posts: