ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

How to bind a dropdown dynamically using React

Written by
Published on
Filed under
How to bind a dropdown dynamically using React

With state-based dynamic rendering, it's a relatively simple process when it comes to generating a dropdown (select) element dynamically onto a page.

Let's start off with a basic webpage template. I will be using functional components for this particular example, so if you're used to class components, you will need to make some adjustments.

We're also going to need to import both the useEffect and useState hooks into our component.

import { useEffect, useState } from 'react';

function App(){
return (


export default App;

On a production application, your dropdown data would more than likely come from a database of some kind, such as MySQL, PostgreSQL or MongoDB.

For the sake of keeping things simple in this example, I will be using a simple JavaScript array to store our dropdown data.

That array can be declared at the top of our main component.

function App(){
    let dropdown_data = ['Item 1', 'Item 2', 'Item 3'];

Next up, let's create a state variable that will hold the new dropdown data and that will automatically bind the client side later on.

You can do that right after the data variable declaration.

const [dropdown, setDropdown] = useState([]);

We're also going to need to use the useEffect hook in order to render the dropdown when the page first loads.

This can be added right after the useState declaration.

useEffect(() => {
}, []);

function loadData(){

Because the dependency array in the useEffect hook is left empty (not left out), the loadData function will only get called one time when the page first renders.


With the state variable loaded we can now render it onto the page.

return (
    <div className="dropdown">
        { => (

Note of caution here, if the state data changes at any point, React will re-render the dropdown options. That means that if a user has selected any of the options prior to that, they will be reset.

In order to account for that, you need to store the user selected value in a local state variable as well.

If, however, you don't plan on having your options updating in real-time, then you don't have to worry about that step.

To get the full running code and to see it running, check out the code over at CodeSandbox.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.


No messages posted yet

Developer Poll


Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks