DEV Community

Coder
Coder

Posted on • Updated on

How to create a React Dropdown

Dropdowns are a common UI element that allow users to select an option from a list. In this guide, we will walk you through the steps of creating a React dropdown with ease. Whether you're brand new to React or an experienced developer, this guide will help you create a functional and stylish dropdown that will enhance your user experience.

Getting Started

To create a React dropdown, you will first need to install React on your computer. You can do this by running the following command in your terminal:

npm install react
Enter fullscreen mode Exit fullscreen mode

Once you have React installed, you'll need to create a new React project. You can do this using create-react-app, which is a CLI tool that helps you set up a basic React project quickly.

To create a new React project using create-react-app, simply run the following command:

npx create-react-app my-project
Enter fullscreen mode Exit fullscreen mode

Replace my-project with the name of your project.

Once you have created your React project, you can start building your dropdown component.

Building the Dropdown Component

To create a dropdown component, you will need to create a new file in your project's src directory called Dropdown.js

mkdir src/components
touch src/components/Dropdown.js
Enter fullscreen mode Exit fullscreen mode

In your Dropdown.js file, you will import React and create a new functional component.

import React from 'react';

function Dropdown() {
  return (
    <div>
      <p>Dropdown Component</p>
    </div>
  );
}

export default Dropdown;
Enter fullscreen mode Exit fullscreen mode

Here is a basic dropdown component that you can use as a starting point. This component simply displays a "Dropdown Component" message.

Next, you will create a state for your dropdown component. Since a dropdown can have multiple options, we will create an array to store our options.

import React, { useState } from 'react';

function Dropdown() {
  const [options, setOptions] = useState([]);

  return (
    <div>
      <p>Dropdown Component</p>
    </div>
  );
}

export default Dropdown;
Enter fullscreen mode Exit fullscreen mode

Now that you have a place to store your options, you can create an option form. This form will be used to add options to the dropdown list.

import React, { useState } from 'react';

function Dropdown() {
  const [options, setOptions] = useState([]);
  const [optionValue, setOptionValue] = useState('');

  const handleOptionSubmit = (event) => {
    event.preventDefault();
    setOptions([...options, optionValue]);
    setOptionValue('');
  }

  return (
    <div>
      <form onSubmit={handleOptionSubmit}>
        <input type="text" value={optionValue} onChange={(event) =>
          setOptionValue(event.target.value)} />
        <button type="submit">Add Option</button>
      </form>
      <ul>
        {options.map((option) =>
          <li key={option}>{option}</li>
        )}
      </ul>
    </div>
  );
}

export default Dropdown;
Enter fullscreen mode Exit fullscreen mode

In the code above, we added a new state value called optionValue to store the value of the input field. We also added a new function called handleOptionSubmit to add the entered option to the list of options.

The function setOptionValue('') will clear the text input after an option is added.

Finally, we mapped over the options array and displayed each option as a list item.

Styling the Dropdown

Now that you have your dropdown component functional, it's time to style it. Styling a dropdown is essential to ensure that it looks good and is easy to use.

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  background: #eee;
  border: none;
  color: #333;
  font-size: 16px;
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 999;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #f2f2f2;
}
Enter fullscreen mode Exit fullscreen mode

Once you've got your CSS in place, you can add the classes to your dropdown component.

import React, { useState } from 'react';
import '../styles/Dropdown.css';

function Dropdown() {
  const [options, setOptions] = useState([]);
  const [optionValue, setOptionValue] = useState('');
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const handleOptionSubmit = (event) => {
    event.preventDefault();
    setOptions([...options, optionValue]);
    setOptionValue('');
  }

  const handleDropdownClick = () => {
    setIsDropdownOpen(!isDropdownOpen);
  }

  return (
    <div className="dropdown">
      <button className="dropdown-button" onClick=
      {handleDropdownClick}>
        Select Option
      </button>
      {isDropdownOpen && (
        <ul className="dropdown-menu">
          {options.map((option) =>
            <li key={option}>{option}</li>
          )}
        </ul>
      )}
      <form onSubmit={handleOptionSubmit}>
        <input type="text" value={optionValue} onChange={(event) =>
        setOptionValue(event.target.value)} />
        <button type="submit">Add Option</button>
      </form>
    </div>
  );
}

export default Dropdown;
Enter fullscreen mode Exit fullscreen mode

In the above code, we added a new state value isDropdownOpen to control the visibility of the ul element that contains the dropdown options.

We also added a new function called handleDropdownClick to toggle the value of isDropdownOpen when the dropdown button is clicked.

We wrapped our ul element inside an isDropdownOpen check to ensure it is only visible when the dropdown is open.

Finally, we added our CSS classes to the appropriate elements. Now our dropdown looks and works like a standard dropdown!

Conclusion

In this guide, we have covered the steps you need to create a functional and stylish dropdown component in React. From setting up your project to styling your component, we've covered everything you need to know. By following these steps and customizing them to fit your needs, you can create a beautiful and effective dropdown to enhance your user's experience.

Top comments (0)