React Dynamic Dropdown List with HTTP Request Tutorial

In this tutorial, you will understand how to create a dynamic dropdown list of items in React, and we will also show you how to fetch the data from the server using the API and fetch() method.

You will use the fetch method to render the JSON response as a dropdown list in React. Similarly, we will create a dropdown component with props and inject the data into the dropdown component using the react state.

To create the dropdown list, we will use the Bootstrap Dropdown Select box component; bootstrap dropdown is a UI component that contains the data in the list form.

We will show you how to implement the bootstrap dropdown in React application quickly.

We will use the class component to get the data from a REST API into the dropdown list module. Besides, we will elaborate on the complete process of using the onChange event handler to create the dynamic dropdown with props.

How to Get Data in Dropdown List with HTTP Response in React Js

  • Step 1: Set Up React App
  • Step 2: Add Bootstrap Package
  • Step 3: Build Dynamic Dropdown Component
  • Step 4: Import Dropdown Component
  • Step 5: View App in Browser

Set Up React App

Before we dive into building the promised functionality, we have to check whether we have the react app ready.

If you haven’t downloaded the app, go ahead, type and execute the given command.

npx create-react-app mercury

Once the blank app is ready, afterwards ensure that you are into the project.

cd mercury

You can directly jump on to the next instruction if you already have the project ready.

Add Bootstrap Package

When it comes to UI creation, Bootstrap package is filled with awesomeness, we would like to demonstrate the awesomeness of this package.

But first, we have to make sure to install the bootstrap in React.

Head over to terminal, and execute following command.

npm install bootstrap

Do yourself a favour, and diligently import the bootstrap in App.js file.

Here is how your code looks after adding the css.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

export default function App() {
  return (
    <>
     
    <>
  )
}

Build Dynamic Dropdown Component

We are using the country information API, and this contains the data regarding the country. Set the initial state in the constructor of the class component.

Use component did mount to render the country data using the API.

When you click on the dropdown, you may also change the value of the dropdown.

You have to create the components/DropdownList.js file, add the given code example in the same file.

import React from 'react'

export const Dropdown = (props) => (
  <div className="form-group">
    <strong>{props.name}</strong>
    <select
      className="form-control"
      name="{props.name}"
      onChange={props.onChange}
    >
      <option defaultValue>Select {props.name}</option>
      {props.options.map((item, index) => (
        <option key={index} value={item.id}>
          {item.name}
        </option>
      ))}
    </select>
  </div>
)

export default class DropdownList extends React.Component {
  constructor() {
    super()
    this.state = {
      list: [],
      chosenValue: '',
    }
  }

  componentDidMount() {
    fetch('http://universities.hipolabs.com/search?country=United+Kingdom')
      .then((response) => response.json())
      .then((item) => this.setState({ list: item }))
  }

  onDropdownChange = (e) => {
    this.setState({ chosenValue: e.target.value })
  }

  render() {
    return (
      <div>
        <h2>React Bootstrap Dropdown Select Box Example</h2>

        <Dropdown
          name={this.state.name}
          options={this.state.list}
          onDropdownChange={this.onDropdownChange}
        />
      </div>
    )
  }
}

Import Dropdown Component in App Js

Next, go to the App.js file; this is considered to be the main component in React.

In this primary component, we will add the DropdownList component.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import DropdownList from './components/DropdownList'

export default function App() {
  return (
    <div className="container mt-2">
      <DropdownList />
    </div>
  )
}

View App in Browser

We are almost done; at this last moment, we just have to invoke the react server.

Here is the simple command that you have to execute to run the app and view it on the browser.

npm start

React Dynamic Dropdown List with HTTP Request Tutorial

Summary

In this profound guide, you have learned how to use the bootstrap framework to create the dynamic dropdown component. We uncover the process utterly to understand how to make a dropdown list in React app using the event handler and lifecycle methods.