React Tutorials

React Bootstrap Custom Dropdown List with Fetch API Tutorial

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

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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago