How to bind a dropdown dynamically using React

Written by

Walter G.

Published on

December 22 2021

Filed under

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 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(() => {
    loadData();
}, []);

function loadData(){
    setDropdown(dropdown_data);
}

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.

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.

Comments

No messages posted yet

Add comment