React-Select Async Dropdown using Search API

Today we’ll show you how to implement react-select async dropdown using search API. In this article, we will integrate the API to get the list of the options based on the given user input and show list in the react-select dropdown.

As per the request of our readers, we decided to provide the solution to their query for implementation of the async component of the react-select npm package.

Steps to implement react-select async component

1. Create a react application
2. Implement the react-select dropdown
3. Add async component with API integration
4. Output

1. Create a react application

Let’s create a react application using `create-react-app`. Please check out this link for more information.

Run the following command to set up a react application.

npx create-react-app react-select-async-component

2. Implement the react-select dropdown

Now we have to implement the dropdown using the react-select npm package.

Please refer to the link below for a step by step explanation.

Implement dropdown in ReactJS using react-select

3. Add async component with API integration

• Import the async select dropdown from `react-select/async`.
• Create a function `loadOptions` to fetch the list by passing the input value where we will integrate the API using the `fetch` method.
• Let’s have two different state variables and change methods to handle the input value and selected value.
• Render the async component and display the values over the page.
• Here we have used the `getOptionLabel` and `getOptionValue` to manage the attribute name for label and value in dropdown.

App.js

import React, { useState } from 'react';
import AsyncSelect from 'react-select/async';

function App() {
  const [inputValue, setValue] = useState('');
  const [selectedValue, setSelectedValue] = useState(null);

  // handle input change event
  const handleInputChange = value => {
    setValue(value);
  };

  // handle selection
  const handleChange = value => {
    setSelectedValue(value);
  }

  // load options using API call
  const loadOptions = (inputValue) => {
    return fetch(`http://jsonplaceholder.typicode.com/posts?userId=${inputValue}`).then(res => res.json());
  };

  return (
    <div class="App">
      <h3>React-Select Async Dropdown - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <pre>Input Value: "{inputValue}"</pre>
      <asyncselect cacheoptions="" defaultoptions="" value={selectedValue} getoptionlabel="{e" ==""> e.title}
        getOptionValue={e => e.id}
        loadOptions={loadOptions}
        onInputChange={handleInputChange}
        onChange={handleChange}
      />
      <pre>Selected Value: {JSON.stringify(selectedValue || {}, null, 2)}</pre>
    </asyncselect></div>
  );
}

export default App;

Note: For the demo purpose, I am using the `jsonplaceholder` API and searching the list by `userId` but you can implement the API which provides the facility to search by name.

4. Output

Run the application and check out the output in the browser.

Output - React-Select Async Dropdown using Search API - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project