Menu

How to bind a dropdown dynamically using React

2014 devs read this
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 (
<div>
<select>

</select>
</div>
);}

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 declare 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 from above.

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

function loadData(){
    setDropdown(dropdown_data);
}

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

JSX

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

return (
    <div className="dropdown">
        <select>
        
        {dropdown.map((item) => (
            <option>{item}</option>
        ))}
        
        </select>
    </div>
)

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 G. author of blog post
Walter Guevara is a Computer Scientist, software engineer, startup founder and previous mentor for a coding bootcamp. He has been creating software for the past 20 years.

Have a question on this article?

You can leave me a question on this particular article (or any other really).

Ask a question

Community Comments

No comments posted yet

Code Your Own Classic Snake Game – The Right Way

Master the fundamentals of game development and JavaScript with a step-by-step guide that skips the fluff and gets straight to the real code.

"Heavy scripts slowing down your site? I use Fathom Analytics because it’s lightweight, fast, and doesn’t invade my users privacy." - Get $10 OFF your first invoice.
Ad Unit

Current Poll

Total Votes:
Q:
Submit

Add a comment