How to Create a Functional React Dropdown Menu?

What Are Dropdowns?

A Dropdown in React JS list is a graphical user interface element that gives users a list of possibilities and allows them to select one value from the list. There are two statuses in the dropdown menu: active and inactive. 

Only one discount is displayed while the dropdown list is fixed. By activating the list, all accessible options in the list are revealed, and This situation may alter this value. You may use a dropdown list as one of many different lists in your apps. It's an excellent technique to provide various options and let the user select one from the list. 

The Dropdown in React JS control reverts to its inactive state once a choice is made when the desired value appears or is acted upon by the files. The "File," "Edit," or "View" menu featured in many software programs is a classic example of a dropdown menu.

Creating a Dropdown in React Js

This process is a beginner's guide to React. We'll teach you how to make a dropdown in React JS. This tutorial's code:

import * as React from 'react';

const App = () => {

 return (

   <div>

     <select>

       <option value="fruit">Fruit</option>

       <option value="vegetable">Vegetable</option>

       <option value="meat">Meat</option>

     </select>

   </div>

 );

};

export default App;

A Dropdown in React JS should have a label according to the user's expectations. In this scenario, you'd like the default wording for your dropdown to be "Select an option." 

Add the HTML for property to your label element to make this work:

import * as React from 'react';

const App = () => {

 return (

   <div>

     <label>

       What do we eat?

       <select>

         <option value="fruit">Fruit</option>

         <option value="vegetable">Vegetable</option>

         <option value="meat">Meat</option>

       </select>

     </label>

   </div>

 );

};

export default App;

This Dropdown in React JS may modify your browser's chosen status by independently displaying its values. However, this is only the select's internal HTML state, which React does not yet manage. 

Let's modify it by making this choice controlled instead of uncontrolled:

import * as React from 'react';

const App = () => {

 const [value, setValue] = React.useState('fruit');

 const handleChange = (event) => {

   setValue(event.target.value);

 };

 return (

   <div>

     <label>

       What do we eat?

       <select value={value} onChange={handleChange}>

         <option value="fruit">Fruit</option>

         <option value="vegetable">Vegetable</option>

         <option value="meat">Meat</option>

       </select>

     </label>

     <p>We eat {value}!</p>

   </div>

 );

};

export default App;

Usestate is a hook in React that allows functional components to handle state. We can use this hook to dynamically render the choices in our chosen element.

OnChange will get a method from our component, which will set the value of our select element to React a state. This value may then be used to change the behavior of the element.

Learn 15+ In-Demand Tools and Skills!

Automation Testing Masters ProgramExplore Program

We can also use CSS to add extra style, but we don't want to complicate our component's logic:

import * as React from 'react';

const App = () => {

 const options = [

   { label: 'Fruit', value: 'fruit' },

   { label: 'Vegetable', value: 'vegetable' },

   { label: 'Meat', value: 'meat' },

 ];

 const [value, setValue] = React.useState('fruit');

 const handleChange = (event) => {

   setValue(event.target.value);

 };

 return (

   <div>

     <label>

       What do we eat?

       <select value={value} onChange={handleChange}>

         {options.map((option) => (

           <option value={option.value}>{option.label}</option>

         ))}

       </select>

     </label>

     <p>We eat {value}!</p>

   </div>

 );

};

export default App;

We'll start from the ground up and create a fully working Dropdown in React JS reusable and styleable component.

The first thing we'll do is create a simple-dropdown folder for our project. We'll make three files in that folder: index.html, style.css, and script.js, as well as an empty folder named img for pictures.

Let's give the project some basic CSS styling by adding the following to our style. CSS (cascading style sheets):

import * as React from 'react';

const App = () => {

 const options = [

   { label: 'Fruit', value: 'fruit' },

   { label: 'Vegetable', value: 'vegetable' },

   { label: 'Meat', value: 'meat' },

 ];

 const [value, setValue] = React.useState('fruit');

 const handleChange = (event) => {

   setValue(event.target.value);

 };

 return (

   <div>

     <Dropdown

       label="What do we eat?"

       options={options}

       value={value}

       onChange={handleChange}

     />

     <p>We eat {value}!</p>

   </div>

 );

};

const Dropdown = ({ label, value, options, onChange }) => {

 return (

   <label>

     {label}

     <select value={value} onChange={onChange}>

       {options.map((option) => (

         <option value={option.value}>{option.label}</option>

       ))}

     </select>

   </label>

 );

};

export default App;

In the previous chapter, we constructed a reusable Dropdown in React JS component and used it to render a select element in React.

Now that our Dropdown component has been repurposed, We may use it again. For example, if you apply a CSS style to your select element in React and will apply the style to all Dropdown components in your React project.

If you want to make a dropdown group right now, you could place several Dropdown in React JS components next to each other and style them with a border and alignment to make them appear as a group of dropdowns:

import * as React from 'react';

const App = () => {

 const [food, setFood] = React.useState('fruit');

 const [drink, setDrink] = React.useState('water');

 const handleFoodChange = (event) => {

   setFood(event.target.value);

 };

 const handleDrinkChange = (event) => {

   setDrink(event.target.value);

 };

 return (

   <div>

     <Dropdown

       label="What do we eat?"

       options={[

         { label: 'Fruit', value: 'fruit' },

         { label: 'Vegetable', value: 'vegetable' },

         { label: 'Meat', value: 'meat' },

       ]}

       value={food}

       onChange={handleFoodChange}

     />

     <Dropdown

       label="What do we drink?"

       options={[

         { label: 'Water', value: 'water' },

         { label: 'Beer', value: 'beer' },

         { label: 'Wine', value: 'wine' },

       ]}

       value={drink}

       onChange={handleDrinkChange}

     />

     <p>We eat {food}!</p>

     <p>We drink {drink}!</p>

   </div>

 );

};

export default App;

That ends our discussion.

That's all there is to making a Dropdown in React JS component. If you're new to React, I hope this lesson has helped you grasp some fundamental principles and patterns.

Conclusion

It's easy to get caught up in the thrill of utilizing specific libraries or frameworks. Still, a Dropdown in the React JS menu is only a minor portion of your overall project. Using them won't be a wise use of your time unless you require them and they're relevant to your project. If you don't want to utilize these libraries, that's fine—keep in mind that you should aim for using the fundamental components React has to offer, such as styled or standard for React components.

If you are looking to hone the relevant software development skills and become job-ready, we recommend you check the Full Stack Developer - MERN Stack in collaboration with Caltech CTME.

If you have any questions or queries, feel free to post them in the comments section. Our team will get back to you at the earliest.