React Dropdown Tutorial for Beginners: Create a Dropdown Menu from Scratch

In this hands-on tutorial, I’ll show you how to build a React dropdown menu from scratch, without any library. We’ll cover: how to get the selected value from the dropdown, and how to create the dropdown with both functional and class components.

React comes with a lot of component libraries for virtually everything you need, from forms and autocomplete search boxes to sliders and navbars. 

Although these UI libraries can speed up your work and are pretty convenient to use, they can make your project more complex and add to the bundle size. So unless you need to use a library for a specific project, it's preferable to write your own components and keep them as simple as possible. 

In this article, we'll create a basic React dropdown menu, first as a functional component, then as a class component. We won't use any library; instead, we'll define the elements of the dropdown using styled-components. 

By the end of this post, you will know how to create a basic React dropdown menu using functional and class components.

Although this is a beginner tutorial, I won't cover the basics of React, so in order to get the most out of this article you should know:

Building the React Dropdown as a Functional Component

 with React and install styled-components as a dependency. 

 file, as we won’t use it, and we’ll create a new 

 folder, where we’ll build our styled-components. 

 file where we’ll develop the component. Your project structure should look like this: 

Before we dive into the actual component, here's what we’ll cover:

To create the dropdown, we’ll use the HTML 

 element. This has the following structure: 

<select name="selectList" id="selectList">
   <option value="option 1">Option 1</option>
   <option value="option 2">Option 2</option>
</select>

So we have the dropdown element itself (the 

Next to these, we also want to display a heading on top of the dropdown, to tell the users what this list is for. So we’ll need to add a 

Finally, if we want to send the selected options to an API endpoint, we need to wrap this entire component in a 

So let’s create these components as styled-components first, in the 

file.  First, we'll create the wrapper, which is an HTML form. 

import styled from "styled-components";

export const DropdownWrapper = styled.form`
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
`;

---
  
export const StyledSelect = styled.select`
  max-width: 50%;
  height: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
`;

export const StyledOption = styled.option`
  color: ${(props) => (props.selected ? "lightgrey" : "black")};
`;

export const StyledLabel = styled.label`
  margin-bottom: 1rem;
`;

export const StyledButton = styled.input`
  max-width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  border: solid 2px blue;
  padding: 0.5rem;
  border-radius: 1rem;
`;

Next, let's import the components and create the dropdown component skeleton in the 

import React from "react";
import {
  DropdownWrapper,
  StyledSelect,
  StyledOption,
  StyledLabel,
  StyledButton,
} from "./styles.js";

export function Dropdown(props) {
  return (
    <DropdownWrapper action={props.action}>
      <StyledLabel htmlFor="services">
        {props.formLabel}
      </StyledLabel>
      <StyledSelect id="services" name="services">
        {props.children}
      </StyledSelect>
      <StyledButton type="submit" value={props.buttonText} />
    </DropdownWrapper>
  );
}

export function Option(props) {
  return (
    <StyledOption selected={props.selected}>
      {props.value}
    </StyledOption>
  );
}

We have our dropdown component, so let's include it in the 

import React from "react";
import { Dropdown, Option } from "./Dropdown";

export default function App() {
  return (
    <div>
      <h1>Which service are you interested in?</h1>
      <Dropdown
        formLabel="Choose a service"
        buttonText="Send form"
        action="/"
      >
        <Option selected value="Click to see options" />
        <Option value="Option 1" />
        <Option value="Option 2" />
        <Option value="Option 3" />
      </Dropdown>
    </div>
  );
}

Right now, your app should look like this. 

If you select one of the options in the dropdown menu, nothing happens yet. To be able to get the value of the selected option and send it to an API endpoint, we need to add a hook. 

import React, { useState } from "react";
import { Dropdown, Option } from "./Dropdown";

export default function App() {
  const [optionValue, setOptionValue] = useState("");
  const handleSelect = (e) => {
    console.log(e.target.value);
    setOptionValue(e.target.value);
  };

  return (
    <div>
      <h1>Which service are you interested in?</h1>
      <Dropdown
        formLabel="Choose a service"
        buttonText="Send form"
        onChange={handleSelect}
        action="/"
      >
        <Option selected value="Click to see options" />
        <Option value="Option 1" />
        <Option value="Option 2" />
        <Option value="Option 3" />
      </Dropdown>
      <p>You selected {optionValue} </p>
    </div>
  );
}

Here's what we did. First, we declare a new state variable, which is called 

. We want this to be equal to the value selected from the list, so we'll add a function called 

, which will update the state variable to our selected value. 

 event handler to the Dropdown component, and to define the function that will be called. So now whenever the value of the dropdown changes, the 

 function will be called, and the state value will be updated to the one selected from the list. 

To test if this works correctly, I've added a 

tag right after the dropdown, where we'll print the state value. 

All looks good, so now the only thing that we still need to adjust is the endpoint where we send the selected value. 

I'll add a fake API endpoint, just to test if the form is submitted correctly. In the Dropdown component, add this path to the 

That's all! Now let's create the same dropdown list using a class component. 

We'll create a separate project for this, to keep things organized. You can find the code for the 

We'll reuse the same styles, so let's first add 

 file, and copy-paste the previous styles. 

 file, for our class component. Copy-paste the code from the functional component - we'll start with that and refactor as needed.

// Dropdown.js 

import React from "react";
import {
  DropdownWrapper,
  StyledSelect,
  StyledOption,
  StyledLabel,
  StyledButton,
} from "./styles.js";

export function Dropdown(props) {
  return (
    <DropdownWrapper
      action={props.action}
      onChange={props.onChange}
    >
      <StyledLabel htmlFor="services">
        {props.formLabel}
      </StyledLabel>
      <StyledSelect id="services" name="services">
        {props.children}
      </StyledSelect>
      <StyledButton type="submit" value={props.buttonText} />
    </DropdownWrapper>
  );
}

export function Option(props) {
  return (
    <StyledOption selected={props.selected}>
      {props.value}
    </StyledOption>
  );
}

// App.js

import React, { useState } from "react";
import { Dropdown, Option } from "./Dropdown";

export default function App() {
  const [optionValue, setOptionValue] = useState("");
  const handleSelect = (e) => {
    console.log(e.target.value);
    setOptionValue(e.target.value);
  };

  return (
    <div>
      <h1>Which service are you interested in?</h1>
      <Dropdown
        formLabel="Choose a service"
        buttonText="Send form"
        onChange={handleSelect}
        action="https://jsonplaceholder.typicode.com/posts"
      >
        <Option selected value="Click to see options" />
        <Option value="Option 1" />
        <Option value="Option 2" />
        <Option value="Option 3" />
      </Dropdown>
      <p>You selected {optionValue} </p>
    </div>
  );
}

 hook as we won't use it. Instead, we'll initiate the state in a constructor, as follows: 

// App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }
}

 to the component, to output our dropdown menu.

 render() {
    return (
      <div>
        <h1>Which service are you interested in?</h1>
        <Dropdown
          formLabel="Choose a service"
          buttonText="Send form"
	      onChange={this.handleSelect}          
          action="/"
        >
          <Option selected value="Click to see options"/>
          <Option value="Option 1" />
          <Option value="Option 2" />
          <Option value="Option 3" />
        </Dropdown>
        <p>You selected {this.state.value} </p>
      </div>
    );
  }

The rest of the component is the same as before, but we've added 

 handler as well as to the selected value. 

 function as well, and to add it to the constructor. 

import React from "react";
import { Dropdown, Option } from "./Dropdown";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleSelect = this.handleSelect.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSelect(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.value);
  }

  render() {
    return (
      <div>
        <h1>Which service are you interested in?</h1>
        <Dropdown
          formLabel="Choose a service"
          buttonText="Send form"
          onChange={this.handleSelect}          action="https://jsonplaceholder.typicode.com/posts"
        >
          <Option value="Click to see options" />
          <Option value="Option 1" />
          <Option value="Option 2" />
          <Option value="Option 3" />
        </Dropdown>
        <p>You selected {this.state.value} </p>
      </div>
    );
  }
}

export default App;

 at the end, so now if we reload the app, we should see exactly the same form as before: 

As you can see, creating your own React dropdown menu, selecting a value from the list, and sending it to a backend API endpoint is pretty straight-forward, regardless of which type of component you choose: functional or class component.

If you'd like to learn more, check out these React tutorials: 

AUTHOR

Andreea Macoveiciuc

In this post, we will discuss how to build a dropdown component in React. We will also add an animation to our dropdown.

There are many approaches you can take when adding a component to your application, there is an abundance of component libraries you can use such as 

material-ui but sometimes it is better to just get your hands dirty

In this post, we are going to do exactly that and build our own dropdown component.

A dropdown is a staple in any web application and is most commonly used in menus to display a list of options to the user.  A dropdown can also be used to display some information to the user that can be shown on a button click.  They are used all across the web and you could also be asked to build one in your next interview!

I know that building a component such as a dropdown may seem intimidating, but in this post, we will take it step by step so you can follow along.  The knowledge gained from this post will also help you build any custom components! 

By the end of this post, you will be able to:

Armed with the above knowledge, you will have a newfound confidence when approaching building components in React.

To get the most out of this article, we assume you're familiar with component basics in React, React Hooks, and also core JavaScript.  

If you do not know any of the above but would like to learn, here are some great resources:

Now it's time to get started on our journey of building our very own dropdown component.

Before building our dropdown component, it is important to discuss the different parts of a dropdown.

There are four key components to a menu dropdown:

The component structure could look like this:

The above is just theory, you can be as creative as you want when building your own component.  When building custom components, it is really important to build the component to suit your use case as it may be quite different from the standard.  It's good to use the best practice guidelines but also don't be afraid to be creative!

Let's first start with a very basic dropdown, we will click on a button that will show a pop up that tells the user something.

When building a basic dropdown component, there is one important piece of state.  The important piece of state is whether the dropdown is open or not.  We will also need to add a function to handle toggling this piece of state.  

This will all live in our wrapper component, which in our case is 

 to manage the showing and hiding of the dropdown for us (check out the docs here for 

const [showDropdown, setShowDropdown] = useState(false);

<BasicDropdown
  showDropdown={showDropdown}
  setShowDropdown={() => setShowDropdown(!showDropdown)}
 />

 component.  The main thing we need is something to trigger our dropdown and also the content of our dropdown.

const BasicDropdown = ({
  showDropdown,
  setShowDropdown,
}) => {
  return (
    <div class="dropdown-wrapper">
      <button
        onClick={setShowDropdown}
        className="trigger-button"
      >
        Trigger Dropdown
      </button>
      {showDropdown && (
        <div class="dropdown">
          Hey I am the dropdown
        </div>
      )}
    </div>
  );
};

 to trigger the dropdown and then we only show our content when 

 is true.  There is a little CSS with this too, the key part of the CSS is setting 

.dropdown-wrapper {
  position: relative;
  width: 200px;
}

.dropdown-wrapper .dropdown {
  background: #fff;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 0;
  font-family: "Open Sans";
  font-size: 22px;
  display: flex;
  align-items: center;
}


This is a very basic dropdown but still is very commonly used when displaying some information to a user.  

You could reuse this in various places and even expand it by opening it up to additional props such as a custom color or custom text.

Why not try to add those additional props to the Codesandbox below, this will help further your knowledge of building custom components and making them reusable.

So we can use a lot of the knowledge we gained above to help build our dynamic dropdown.  The big difference with this dropdown is that it will accept a 

 and it will also have a transition when it is being open/closed.  The 

 prop will determine when it is rendered within our dropdown list.  This could literally be anything. A very common scenario is sub-items for a navigation menu.

In our case we are going to make up some items:

const items = [
  "banana", 
  "apple", 
  "orange", 
  "pear", 
  "grape", 
  "berry"
];

We can then pass this into our dropdown component:

<BasicDropdown
  showDropdown={showDropdown}
  setShowDropdown={() => setShowDropdown(!showDropdown)}
  items={items}
/>

Our dropdown component will behave quite similar to the one before, except we will map over each item in our array and create an 

const BasicDropdown = ({ ..., items }) => {
  return (
    ....
      <ul className={showDropdown ? "active" : ""}>
        {items.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
   ....
  );
};

To achieve this, we will use the following CSS (nothing too fancy going on, mostly overriding default browser styles):

ul {
  background: #fff;
  color: #000000;
  list-style: none;
  margin: 0;
  font-size: 18px;
  overflow: hidden;
  height: 0px;
  transition: height 0.3s ease;
  padding: 0;
}

ul.active {
  height: 100px;
  overflow: auto;
}

As you can see from above, we have set a 

 property. In simple cases where only one attribute is changing in a predictable manner, we can use 

. As we get a lot of items being passed to our list, we can then scroll our dropdown to suit this.

If you're interested in learning further, try to build your own components.  There are some great long-form articles you can read on building your own components such as 

.  Personally, I would say that if you have read all the above then you should just open your own Codesandbox and start building components such as an Alert or a Modal. This is truly the best way to learn!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Dropdown

React Dropdown Tutorial for Beginners: Create a Dropdown Menu from Scratch

Quick & Easy React Dropdown Component

This has been a really good investment!

Advance your career with newline Pro.

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript