React Select AutoComplete from API | how to build a live search component in react

Today's topic is how to create an autocomplete dropdown in react that loads the data from an API and show the results to the user. We previously talked about react-select package to build awesome dropdowns in React. Now it is time to make it more powerful by adding autocomplete ability. You'll see how to add this package to your reactjs app, how to get the data from the server using javascript fetch API, and add an animation to our dropdown to make it a fancy live search component.

00:00 Introduction
00:28 Project demo
01:32 Project setup
02:35 Adding react select to the project
04:32 Loading data from the api
09:07 Adding animation to react select
10:18 Customizing react select appearance

 Useful links:
React-Select setup:

React-Select website:

ReactJs crash course:

Programming with Masoud website:

[jatinchhabria]

Thank you brother. Saved my career. Met the deadlines. I got promotion after using code from your video.

[emersonnolasco]

You totally save my day, man
A recommendation I can give is to wrap the code inside loadOptions into a debounce from lodash, bc the way the video shows an api request is made every time the user types, and you want to avoid that.
Nice video!

[pradeepnayak]

what is the use of value in Async select ??async select by default display the value in input... right??

[aarti]

Great content and explanation too..!!! Love ya

[toronto]

Hi... Very informative video. Can you tell me how to not have the dropdown show when i click on address bar? I want the data to show only when i start typing. Right now, the moment i click on address bar, the dropdown shows data

[aashuOP_]

Hi Masoud, how can we limit the number of selection to lets say 5, while using isMulti Select?

[kosiazom]

Hi Masoud is there a reason you used PureComponent vs Component?

[zhaoyinqin]

Hi, what is the difference between value and inputValue, onChange and onInputChange? I saw these props in the doc

[Maskarado]

hey, please help me with a doubt.
U use a class in userlist.js, i use function ( function App() {}).
But i tried to use a function, and did not work, u know the difference?.
Probably is something in "extends PureComponent", but im new in REACT and i dont know what this extends is and what it do.

[yohansutanto]

can you share teh source code for this video?

[marknet]

In addition to npm install, you forgot to write tests.

[janlawrence]

this.setstate is not a function i got
tthis error to this ligne " this.setstate({ selectedVolunteers: selectedVolunteers || [] });"

[codingbaba]

Bro why it is not showing dropdown man