React Tutorial- Bootstrap Custom Dropdown List With Fetch API

React Tutorial- Bootstrap Custom Dropdown List With Fetch API

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

In this tutorial, we will get to know how to build a dynamic dropdown module from scratch.

Throughout this guide, we will cover multiple concepts of react. We will show 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. We will also see 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. We will learn to use fetch API for making an HTTP request that helps us 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

 

Now, let us learn in detail:

Step 1- Download React Project

The very first step is to position ourselves on the terminal. We might use a terminal app or go with the integrated terminal in our favorite code editor.

For this purpose, we will use the npx and create-react-app tool to download the new application:

npx create-react-app react-webb

 

After the project is downloaded, we will jump into the app folder:

cd react-webb

 

Step 2- Install Bootstrap Library

Here, we have to install the Bootstrap package. This library speed up the UI module creation work.

On the terminal, we will write the following command and hit enter:

npm install bootstrap

 

Afterward, we will move into App.js. So, we have to import the bootstrap path:

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

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

 

Step 3- Create List In Dropdown Component

Here, we will get to know how to create a custom DropDown list.

Consequently, enter into component/ folder. After that, we will create the CustomListDropDown.js file and add the given 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>
    )
  }
}

 

Step 4- Update App Js File

So, we are almost done with the work. We simply have to import the custom dropdown component in App.js:

import React from 'react'

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

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

 

Step 5- Start Development Server

In this final step, we will have to open the terminal and type the given command. Then, we will run the command:

npm start

 

Conclusion

So friends, hope that this guide has made us know 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.

 

Thanks