A Couple Ways to Build Dropdowns in React

Dropdown menus remain a fundamental way of building forms on the web. React has several ways of building these dropdown. In this article, I’ll cover two ways of creating these essential forms.

These two methods are among the most popular that I came across while building my own forms.

Using HTML tags

You can use standard HTML tags to build a select form. To do this, you can wrap option tags in a select tag.

<select value={this.state.weight} onChange={this.onSelectChange}>
         <option value="8 to 12 pounds">8 to 12 pounds</option>
         <option value="12 to 14 pounds">12 to 14 pounds</option>
         <option value="14 to 18 pounds">14 to 18 pounds</option>
         <option value="18 to 20 pounds">18 to 20 pounds</option>
         <option value="20 to 24 pounds">20 to 24 pounds</option>
        </select>

Here, the values correspond to the labels. I found this method the easiest to use, especially for a small set of data. Specifically, it was easier to tie the selected option to state while using the class constructor. This method works well with the classic React methodology.

Using map

Another way of building a dropdown menu is by mapping through those options. Here, the option tags are still wrapped in the select tag, but instead of listing each option, we use the map function to show each item.

    const renderselect = () =>{
      return(<select>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}

     <

What does it map through? There are several options you can use. For example, you can use hooks to map through the values. If you have an object or an array of these values, you can also use those.

In the example below, I’ve used the useState feature to show state.

const [items] = useState([
      {label: "8 to 12 pounds", value:"8 to 12 pounds" }, 
      {label: "12 to 14 pounds", value:"12 to 14 pounds" },
      {label: "14 to 18 pounds", value:"14 to 18 pounds" },
      {label: "18 to 20 pounds", value:"18 to 20 pounds" }, 
      {label: "20 to 24 pounds", value:"20 to 24 pounds" }
    ])

Hooks make for a cleaner code base, but sometimes can abstract things too much. Those familiar with hooks, and those planning to use redux, as well as those with a larger set of data to add to their forms, should consider using this method.

Summary

You can also create a dropdown menu using CSS and conditionally rendering the menu on click. This, however, would require a lot more code to get up and going. On the other hand, it is a more intuitive way of styling your dropdown menus.

Dropdown menus are one of the most popular types of forms on the Internet. I covered two ways to create these forms in React. There are many ways to build these types of forms, but they seem to rely on these two methods: either listing your options by tags or by mapping through a list of options. Which way is your preferred method?