React 18 Bootstrap Custom Dropdown List with Fetch API Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

Dropdown is a valuable and prominent module, which is often used to select one option from the given list.

But do you know how to build a dynamic dropdown module from scratch?

This tutorial covers multiple concepts of React. In general, we will show you how to build a dropdown list in React application.

We will enumerate every element that is going to be used to create a dropdown in React.

Usually, a dropdown is a horizontal select box that displays one value selected by the user among other dropdown list items.

You will learn how to dynamically set the list properties in React using fetch API and Bootstrap.

The Fetch API is a streamlined interface that permits you to trigger HTTP requests to servers from web browsers.

You will learn to use fetch API for making an HTTP request that helps you make a custom dropdown module in React.

How to Build Dynamic List in React DropDown with HTTP Request

• Step 1: Download React Project
• Step 2: Install Bootstrap Library
• Step 3: Create List in Dropdown Component
• Step 4: Update App Js File
• Step 5: Start Development Server

Download React Project

Position your self on the terminal, you might use terminal app or go with the integrated terminal in your favourite code editor.

We will use the npx and create-react-app tool to download the new application.

npx create-react-app react-webb

Once the blank project is utterly downloaded, jump into app folder.

cd react-webb

If you have installed app in advance then move onto further step.

Install Bootstrap Library

In this step you will have to install the Bootstrap package. Apparently, this library speed up the UI module creation work.

On the terminal, write the given command and hit enter.

npm install bootstrap --legacy-peer-deps

Move into the App.js, here you have to import the bootstrap path.

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

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

Create List in Dropdown Component

Now, in this step, we will reveal how to create a custom DropDown list.

Consequently, enter into components/ folder, thereafter create the CustomListDropDown.js file and add the below code within the file.

import React from 'react'

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

export default class CustomListDropDown extends React.Component {
  constructor() {
    super()
    this.state = {
      collection: [],
      value: '',
    }
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((res) => this.setState({ collection: res }))
  }

  onChange = (event) => {
    this.setState({ value: event.target.value })
  }

  render() {
    return (
      <div className="container mt-4">
        <h2>React Dropdown List with Bootstrap Example</h2>

        <CustomDropdown
          name={this.state.username}
          options={this.state.collection}
          onChange={this.onChange}
        />
      </div>
    )
  }
}

Update App Js File

So far we have completed almost all the work. You just need to import the custom dropdown component in the App.js.

import React from 'react'

import CustomListDropDown from './components/CustomListDropDown'
import 'bootstrap/dist/css/bootstrap.min.css'

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

Start Development Server

Open the terminal one last time and type the given command and don’t forget to run the command.

npm start

After the server is started, make sure to copy and paste the given url to check out the feature we built.

http://localhost:3000

Conclusion

This post helped us understand how to build a custom dropdown component in React.

A Dropdown list is a significant user interface component that allows users to select options from a list.

We used the actual API to display the list, fetched the data, and put it into the dropdown.