Highlighting Dropdown Options in ReactJS

Highlighting dropdown options is important because it improves the menu's usability by making it easier for users to identify the options they are hovering over.

When a user hovers over an option, it becomes highlighted, making it stand out from the other options. This helps the user quickly identify the option they are interested in and select.

Additionally, highlighting dropdown options is a simple but effective way to improve the usability and accessibility of the menu.

Creating interactive dropdown menus in ReactJS with option highlighting

Users can follow the steps below to implement the option highlighting in the ReactJS dropdown.

• Step 1 − Create a functional component that renders a dropdown menu.

• Step 2 − Use the useState hook to keep track of the currently selected option.

• Step 3 − Create a function that filters the options based on the user's input. Use the filter method to return an array of options that match the user's input.

• Step 4 − Next, render the search input field and the dropdown menu in the component's JSX. We need to use the value and onChange props to handle changes to the input field and the selected option.

• Step 5 − Use the style prop to apply a background color to the selected option.

Example

In this example, an input field is added to the dropdown menu, which allows the user to search for an option by typing. The search state property is used to track the user's input, and the filteredOptions variable is used to filter the options based on the user's input. The options that match the user's input are highlighted by adding the CSS class 'highlighted' on the option tag. The onChange event handles changes to the input field and the selected option.

import React, { useState } from 'react';

const options = ['Hello World', 'Option 2', 'Option 3'];

function Dropdown() {
   const [selected, setSelected] = useState('');
   const [search, setSearch] = useState('');

   const filteredOptions = options.filter(option =>
      option.toLowerCase().includes(search.toLowerCase())
   );

   return (
      <div>
         <input
            type="text"
            placeholder="Search..."
            value={search}
            onChange={e => setSearch(e.target.value)}
         />
         <select
            value={selected}
            onChange={e => setSelected(e.target.value)} >
            {filteredOptions.map(option => (
               <option
                  key={option}
                  value={option}
                  className={selected === option ? "highlighted" : ""}>
                  {option}
               </option>
            ))}
         </select>
         <div>Selected: {selected}</div>
      </div>
   );
}
export default Dropdown;

Output

Example 2

In this example, The onInput event handles changes to the input field. The handleSearch function filters the options based on the user's input and updates the filteredOptions state property.

The rest of the code is similar to the previous example, where we update the filtered options, handle the selected option, and highlight the selected option using a ternary operator.

import React, { useState } from 'react';

const options = ['Option 1', 'Option 2', 'Option 3'];

function Dropdown() {
   const [selected, setSelected] = useState('');
   const [search, setSearch] = useState('');
   const [filteredOptions, setFilteredOptions] = useState(options);

   const handleSearch = event => {
      setSearch(event.target.value);
      setFilteredOptions(options.filter(option =>
         option.toLowerCase().includes(search.toLowerCase())
      ));
   }
   return (
      <div>
         <input
            type="text"
            placeholder="Search..."
            value={search}
            onInput={handleSearch}
         />
         <select
            value={selected}
            onChange={e => setSelected(e.target.value)} >
            {filteredOptions.map(option => (
               <option
                  key={option}
                  value={option}
                  className={selected === option ? "highlighted" : ""}  >
                  {option}
               </option>
            ))}
         </select>
         <div>Selected: {selected}</div>
      </div>
   );
}
export default Dropdown;

Output

We learned how to create interactive dropdown menus in ReactJS by implementing option highlighting. We also learned how to create a functional component that renders a dropdown menu.

We have created a user-friendly and interactive dropdown menu that enhances the user experience.