How To Make a Dynamic Dropdown With React and Fetch

In this post, I'm going to walk through how to create a dynamic dropdown that retrieves data based on an API call using React.js and Javascript's fetch functionality. By the time we're finished, we will create functionality that looks like this.

To get started, we'll install the react and react-dom npm packages, then create files for two components: PlanetSearch and Planet. If you already have react installed in your project and you just want to add existing dropdown functionality, feel free to skip this part.

mkdir StarWarsSearch
cd StarWarsSearch
npm install react --save-dev
npm install react-dom --save-dev
touch index.html
touch PlanetSearch.js
touch Planet.js

Start by adding an extremely simple div with an id of react-search and absolutely no content. We will push some content to the div later on. 

<div id="react-search"></div>

Next, we'll create our PlanetSearch component. It consists of three parts: 

1. Importing dependencies and creating a state

2. Calling the StarWars API on componentWillMount

3. Specifying the DOM element and rendering the result 

Step one is super simple. We will just import the dependencies and create a state object which consists of an empty array called planets. 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Route, withRouter} from 'react-router-dom';
import Planet from './Merk';

class PlanetSearch extends Component {
    constructor() {
        super();
        this.state = {
            planets: [],
        };
    }
}

Next, we will call the Star Wars API using fetch, then map over the result to grab the first ten planets. If you like, you can use console.log to return the planets to get a better understanding of the structure and make sure you have access to the API data. 

componentDidMount() {
    let initialPlanets = [];
    fetch('https://swapi.co/api/planets/')
        .then(response => {
            return response.json();
        }).then(data => {
        initialPlanets = data.results.map((planet) => {
            return planet
        });
        console.log(initialPlanets);
        this.setState({
            planets: initialPlanets,
        });
    });
}

Notice that we are calling this method using React's built in componentDidMount, so we know it will be called and the data will be accessed right before the div is displayed on the screen. 

For step three, we'll render a simple div that contains the Planet component, then render the React component on the div with an id of react-search that we created in the index.html file. 

render() {
    return (
                <Planet state={this.state}/>
    );
}

// after component is finished

export default PlanetSearch;

ReactDOM.render(<PlanetSearch />, document.getElementById('react-search'));

At this point, we are sending our array of planets down to the Planet component, so let's create a dropdown consisting of all of our planets! 

To do so, we'll first access the planets using props and assign them to a local variable. This is just for readability's sake. Then we'll map over all the planets, creating <option> tags that display each of the planet's names. 

Finally, we'll render these option items wrapped with a select tag. 

import React from 'react';

class Planet extends React.Component {
    constructor() {
        super();
    }

    render () {
        let planets = this.props.state.planets;
        let optionItems = planets.map((planet) =>
                <option key={planet.name}>{planet.name}</option>
            );

        return (
         <div>
             <select>
                {optionItems}
             </select>
         </div>
        )
    }
}

export default Planet;

This is the entire Planet component. With the current example it may be unnecessary to extrapolate this functionality to an entire different file, but in the future if we want to add additional logic into our Star Wars search project, we are ready to do so. 

At this point we are finished with the tutorial, but there's loads of extra stuff you could do next to enhance the project. What's next? Well you could grab the selected planet using an onSelect event and add it to the state, or call the API to receive additional information about each planet once it is selected. The world, nay, the universe awaits! May the code be with you!