React Beginners Tutorial - Build an Autocomplete Text Box

In this React tutorial for beginners you will learn to create a basic React app and an autocomplete text box React component.

--

[LucidProgramming]

Haven't watched the entire video yet, but the delivery and video are quite well done. Looking forward to checking out the rest of it soon. Cheers!

[RounakJainone]

Thank you God bless with health.Thank you for mentorship

[NatPersea]

Thank you! I really like the way you introduce the concepts!

[sahotahappy]

Although, I have not watched complete video but I liked that its just 45 mins long.

[srinika_cute_doll]

beginners tutorials...beyond scope of this.props.video

[toonsoffun]

Autocomplete guide starts at 12:00. Also does anyone know what libirary I should install to get 'api/items?name=${foo.bar}'] to work?

[abarrios]

Wow!!! Thanks a lot, you resolve a lot of my questions in this video, thanks a lot!!!

[abhishekroy]

Extremely useful video! Thanks a lot!
I have a question though, which is not exactly related to React but web dev in general.
I am querying a third party API for the data, and just considering the pros and cons of setting up an autocomplete textbox as opposed to a normal textbox with a search button. The autocomplete way of doing this will obviously query the external API servers every single time I type something in the textbox. Now, even though that looks nice from the user's perspective, it probably is a lot more expensive on the servers. If it were my own servers, I wouldn't think much of it. But that isn't the case, hence my hesitation.
I would really appreciate any help in choosing which route to take. Thanks again!

[rtzer]

A very nice tutorial!!Thank you for this useful tutorial😀😀

[iamegha]

Thanks! Very nice video. Can I get the Code download link?

[sailajabattula]

Its very useful but please clarify my doubt you are using ul and li so that how can we select the options by using downshift key up and key down. Can you please

[kesavulup]

Thank you, sir. Can you tell me how to add keydown event to the input box

[AykutKlc]

How to prevent the autocomplete list to pop instead of pushing content under it (as in 44:54)?

[bhavyamounika]

where is the entire code of this react application

[JohnSmith-luzr]

The setState function can take an object now

[hasuni_sama]

Hello... Could you tell me, please, how can I close <div> with suggestions if user clicked on other elements (not suggestions or input)? I tried to use onBlur, but it works incorrect.

[Asimov]

I understand how this works, but mostly when you do this you are using a backend api, and you may only want 7 results to come back at a time. For instance if it was google there may be thousands of items in your array. So how could we modify this to send to a backend api and get back only like 7 results. Obviously you would have to send extra information into the class like the url and such. Would it be easy to change it so that is possible. I am going to have a go myself, and let you know how I get on.

[mdjahidulislam]

i have 5000 list of category how to optimally show this on the search box?

[TheMkkr]

getting a "Super expression must either be null or a function" error...

[shauryakapoor]

My App.js file is pretty different from the one shown in the video. Is this because of the updated version of the React?

I am a beginner and I am totally lost. Can someone point me in the right direction?