Make a Search Bar with React (with API Calls) | Beginners Tutorial

Through this tutorial, learn how to make a search bar component using React. This beginner project covers ReactJS, functional components, props, state, API calls using fetch, HTML, and CSS.
Are you looking to build a powerful search bar in React that can retrieve data from any API? Then look no further! In this comprehensive tutorial, we'll show you how to create a search bar component that connects to an API and fetches data dynamically using React.
Throughout the tutorial, we'll cover the basics of React and demonstrate how to use React hooks and state management to create a search bar that dynamically updates as you type.
By the end of the tutorial, you'll have a fully functional and professional-looking search bar component that can be used in any type of web application, including e-commerce, social media, or search engines. So don't wait any longer, start building your own search bar in React today!
🚨 Break into a software dev career with this free course from CourseCareers! - coursecareers.... 🚨
Discord - / discord
Subscribe - / @code_complete
☕ Donate to support the channel! - www.buymeacoff...
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.ne...
☁️ FREE $100 for server hosting on Linode - linode.gvw92c....
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqc...
-- 🔗 Links 🔗 --
💻 Code - github.com/Cod...
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!

[@Code_Complete]

Have questions or feedback? Head over to our Discord server! discord.gg/TWBtv5an7N Solve advanced programming challenges and become an expert software engineer with CodeCrafters! 40% discount on your membership - app.codecrafters.io/join?via=CodeCompleteYT

[@abhishekraisycs514]

Great tutorial mate! Made this project at 12am at night while waiting for champions league clash between bayern vs psg.

[@Code_Complete]

Thanks man! Hope your team won 😃

[@mikeyTheDev]

Clicked in this video accidentally, REALLY an AWESOME tutorial mate

[@freddie4818]

This was so great. Easy and clear to follow without being too slow. Thank you!

[@RobertAlexanderRM]

I have been banging my head several times as a backend developer trying to whip up simple FE interfaces. Your video is the first that gets me somewhere. At last. Your patient explanations but some queries to ChatGPT are making me progress a little. Thanks a lot.

[@Code_Complete]

Glad you found the video useful!

[@garymiller8320]

Excellent video. The only criticism I have is the contrast is insufficient for those with low vision. I realize the focus is on the code, but the UI determines its accessibility. Please keep that in mind for future projects. Thanks!

[@Anubis10110]

You can add debounce to save network calls… thanks for you effort

[@Rohitweasley]

That was really cool, I was looking into "react-search-box" package for the same functionality but that package was not very easily customizable. I didn't know I could implement it in such a straightforward manner. Thanks a lot!

[@JesusOnAGoat]

My god this is absolute life saver this video! I was struggling hard understanding the concepts and you explained it so well! Definitely gained a sub from me!

[@minimunch1971]

This tutorial is great!! Thank you for explaining what each line of code is for, I learned a lot!

[@codewar534]

Awesome tutorial man! Helped me a lot to learn api in react js!🔥

[@Code_Complete]

Glad it was useful!

[@oscarmelgarejo8563]

Hey! Thank you so much for sharing your knowledge with us. This video was a big help for me.

[@abduab5453]

just what i was looking for, thank you very much, i was trying to make my first react project using api but could not find relevant explanation.

[@vladkara]

Awesome! Short and very clear!

[@Racine14]

Perfect tuto.... I'm from DR Congo and I wish all the best dear

[@Code_Complete]

Thank you so much 🙂

[@adhinarayanakunchala]

thanks sir its wonderful tutorial for learning anything

[@tarunnaik3053]

Thank You so much for this wonderful lecture ☺️

[@bykeride2-dw1ly]

Just one word.... , superb.... Explanation

[@AjayKasthala]

Need more Tutorials like these Kudos to you

[@Code_Complete]

Thanks a lot!

[@kishorek4319]

Make More Useful tutorial like this.!! Iam ready to learn More from you bro..😍💜

[@Code_Complete]

Thanks a lot!

[@farid9323]

Helpful tutorial. In production apps, you'd need debouncing. Otherwise, you'd be calling the API on every key stroke.

[@BoldonBigLad]

Brilliant video and it has helped me a great deal.

[@RaselHasan-o2r]

Loved you contents, thanks man

[@sadmanh0]

very well presented, thanks.

[@javedkhan0142]

Thank for creating this video

[@jagadishdasari9120]

Wonderful tutorial. Please do a common implementation across various JS flavors like Angular/React/Vue/etc to show the variance…👏

[@freshhorizonswithjakub]

I feel like you really get it in react you should also get it in other frameworks. Concept is same.

[@khurshedaalam7478]

shanadar Jabardast Jindabad bhai ek dum super

[@WencelausMaina]

This was very helpful. Thank you very much.

[@Thinkwellpub]

Question. How do you clear the search bar once you click on something? Great tutorial! Thanks!

[@raymondwienand8177]

Great video. It would be a much better user experience if you use text wrapping if you have the browser open on the side. And a bonus if you close the explorer on the side. Sometimes it's difficult to see what you typed

[@chantal3616]

Very helpful! Thanks! 😀

[@cyborganic]

Very helpful, thank you!

[@mateusbessadev]

Thx bro, that helped me a lot!!!

[@sadimridha5753]

That was great tutorial ❤

[@sriramharshit2672]

thanks a lot man

[@hervogue]

Helpful! Thanks so much!

[@segu_.]

good tutorial! wouldnt make more sense to fetch just one time the api and then run a filter method when input changes? thanks!

[@Code_Complete]

Good question! That makes sense when we have < 100 items in our database for example but if we had 100,000 items for example, it would take a lot of bandwidth and time to first fetch all that data

[@segu_.]

@@Code_Complete true!

[@chungtunguyen6135]

thanks for this tutorial, very helpfull!!!

[@hajamydeen2025]

super explanation bro. more videos we need

[@MaxMov-sp8hr]

Nice! Simple & Clear! ☀

[@Code_Complete]

Thank you! 🙂

[@uchiha_sasuke_48]

Superb and simple project

[@Code_Complete]

Glad you liked it!

[@Patrick_Streams]

this is so helpful i was wondering how will I fetch multiple endpoint

[@KJOB]

I learned something new thanks

[@saivivekachutha8282]

yeah its looking good and understandable can you please explain the hole thing what you have done ? like not technical tell me in 5lines

[@KuldeepSingh-jg9xz]

how do i set the value selected under SearchResults back to Searchbox . Can you also share that ?

[@khushwantdafre3230]

Excelent tutorial, I had one question, Insted of showing the results on the same page can we use react router to redirect to another page and show the results there?

[@farid9323]

Yes. You could use global state with the router.

[@rajatrai_]

you have gained a subscriber!

[@Code_Complete]

Thanks for subscribing!

[@riteshsharma9838]

if you didn't remember how to reopen that all then open terminal 1) cd react-search-bar 2) npm install 3) npm run dev *** for those who closed the vscode and unable to open the whole website or local host***

[@tahaansari5621]

Great tutorial! I was wondering if we should be able to fetch results in the useEffect hook.

[@Code_Complete]

Great idea! That way the data only needs to be fetched once

[@oluwatimilehinoyewo8010]

Wonderful tutorial man

[@ShareVideo211]

thank you very much

[@PeriklesPeriklesoglu]

thank you

[@hemantjoon]

To the point. Amazing Job Looking Forward for your new videos. Thanks for this

[@Code_Complete]

Thanks a lot!

[@khadizaakter-j1h]

why didn't you use the useEffect for dependency?

[@bhanureddy2087]

you should have shown the final output after finishing as this is a frontend project that mini view looks weird

[@sharath_jonnala]

Can you please make a video how to implement binary search in this?

[@sharath_jonnala]

By the way this is a nice video

[@Code_Complete]

Oh that’s an interesting question! Could you share more details about what you would like in the discord server linked in the channel page? We can discuss a possible solution there

[@ajiteshmishra0005]

What is the difference in creating React application using npx create react app or using vite creat react app?

[@Code_Complete]

Both vite and create-react-app accomplish the same goal of starting a react project quickly. Vite is just better because it is more customizable and has a smaller bundle size

[@ajiteshmishra0005]

@@Code_Complete I'm asking what is the difference we will have while coding. This is okay that we will have bundler as Vite NOT webpack. And what are all major difference we will have using vite?

[@armat_dt]

How to make delay between requests when typing, without delay it would be like dos attack to server😂 Very helpful video, thank you, hope for answer) Edit: you can use debounce method

[@kakun7238]

one for the infinite scrolling in this select too

[@Code_Complete]

Thanks for the great suggestion!

[@turing4991]

will it return closest matching word? for example if i type "food" will it be able to detect the word "foods"

[@cr7fanclubindiacr746]

Can i use different api from another website like google books api

[@javedkhan0142]

You are good 👍

[@HaroonKhan-ov4ru]

Is there a way to have this feature search through two collections in a data base?

[@mzeren4713]

it works when it is lowercase but it deosnt work when it will be uppercase

[@Code_Complete]

Good catch, it should be user.name.toLowerCase().includes(value.toLowerCase())

[@Rashomon69]

This does an API request on EACH change? Isn't that a HECK of a lot of API calls?

[@AdityaRaj-ki3md]

The video is great but if word wrap was on it will be easier to go with it.

[@Code_Complete]

Good point, thanks! Will use it in my future videos

[@Chandrashekhar_5555]

super👌 . please make image editor with features having color change of image(also gradient color and monochrome) compress the image to reduce size , image characterisation by their types (png, jpg... ect)

[@prashant0597]

Can you make another video same as this but the API call using redux and show a list whatever inside in API.

[@Ytrajpoot]

Hello, when i create a build file with vite. The routing system does not work like its work fine inside website navigation but when I write URL by myself it say GET no request found

[@EMdragonKnight]

Similar answer I got from Chatgpt, but better explained.

[@tomasburian6550]

Why not make it on click? When you're working on a large project with a lot of data, you want to use a button-enabled search.

[@sidforreal]

would be greate if you can cover FE interviews system design questions on this channel Subscribed!!

[@Code_Complete]

Thats a great idea! Will look into it 👍

[@muhammadhaykal9323]

Hi please make video how to integrated otika or stisla bootstrap template to reactjs Because iam getting stuck sidebar not working when navigate to other page using react-router-dom

[@sonugupta147]

At 15:50, I didn't understand how you evaluated those variables in the return statement as Boolean ?

[@Code_Complete]

In JS if a value is "falsy" i.e. null, undefined, 0, "", etc. it is treated as false. In that line I chained up multiple values which could be truthy or falsy using && operators

[@sonugupta147]

@@Code_Complete thanks for your reply. Actually I was unaware that the filter function filters a particular element of the array based on the boolean returned from its callback.

[@AlanSchooll]

Nice tutorial! You haven't used async in fetch data funtion, then how it can be used as for performing async function fetching data?

[@Code_Complete]

You can use async/await which is the new way of doing things or you can use promise chaining using .then() which is slightly older

[@MvrkTeja]

short and descriptive

[@Arpit7899]

Hey buddy great tutorial. I had a question that inside fetchData function i am not able to change fetch to using hook useEffect - which is the new way. The error we get is - Hooks can only be called inside of a body of a function component. Basically they are asking us to use hooks only at the top level of react function. So any idea how we implement onChange but with hooks and not just fetch

[@francisfuwaku]

make sure the useEffect comes before any codeblock like if(){}

[@PaulPC999]

what if i have my own API, im getting an error 'products.filter is not a function'

[@Code_Complete]

You should try logging out what products is. This likely means its not an array and could be an object or undefined

[@pulkitagrawal5054]

Can you tell me what should i do to automatically hide the search list if I scroll the page?

[@crazygamepad6592]

use the propertie of your input html element, onFocus to show the suggestion and the items and onBlur to hide them

[@tanoryjakaperdana1419]

Use filter on server side bro.. dont take all the datas from API just to filter it in front-end..

[@abdullahjama8404]

lazy me didn't make alot component to make the react app look simpler and more organized

[@nicx.nvrlnd]

is it okay to use debounce?

[@Code_Complete]

Yup that would be great! I wanted to include that in this tutorial but thought it might be a bit too much for a beginners tutorial

[@hybridgamer4105]

​@@Code_Complete But still debouncing will still result in more api calls, one solution i can think of is caching the data fetched from the api and then filtering the data in the frontend itself to reduce api calls. Is it right? Wanted to know what production level apps use

[@derarageremu]

its great but make video of the same project by using next 13 app router.

[@nnasim5089]

Very nice tutorial, can you tell us how you integrate Google or Bing Search API? In react app thanks

[@fillpattanamontri8698]

12:29

[@AvinashYede-ck2cs]

can you make tutorial on redux

[@Code_Complete]

Will do 😃

[@rakshithshetty6781]

Use typehead

[@mtt9119]

Hello! Thank you very much for a very useful lesson! How to make it so that if we select Leanne Graham as a result, it will show us "username" and "email". For example: Leanne Graham Bret Sincereapril.biz

[@johndevnoza4223]

man use time staps, so whoever wants can chose the part they are looking for.

[@Malik-j5e]

add something

[@p1k1m4ru]

This is trash code. Each letter a sent to API? no one use alert() and maybe instead of input to alert you should fulfill the form? ahhh that was to hard i got it

[@prabhat4571]

No need to create state in app man

[@gorkaurzelai5072]

No?

[@Omar-gr7km]

That poor API. Getting called with every letter typed or deleted 🤣

[@Omar-gr7km]

Also, its strongly advised that you don't use map id as the key. In this example, each json item has an id, so you should use that.

[@callous21]

What should you do instead?

[@Babajagrarox]

Why so much prop drilling, is it a standard practice?

[@rahulnikam1279]

As he is teaching for beginners you should not laugh... and don't try to be very cool in comments... you don't might even know the solution for that issue... Ans for this issue is: You can implement debounce on frontend and cache on server side! Study more about debounce ❤

[@jefferyenofe2677]

Api crying

[@nazmuzsakib2368]

wrong method.

[@kaushikid1]

Why don’t you teach the correct method ?

[@josbexerra8115]

Muchas gracias muy bien explicado gracias

[@Code_Complete]

¡de nada!

[@ilirbajrami2902]

isn't this going to skyrocket your hosting bill by making an api request in every key stroke?

[@farid9323]

You would need to debounce the input.

[@ilirbajrami2902]

@@farid9323 can you please explain a bit what do you mean with "debounce"?

[@hybridgamer4105]

​@@ilirbajrami2902basically debouncing delays the function call so instead of calling the api on every keystroke, you can set the delay to maybe 400ms so when the user stops typing or the keystrokes are delayed for more than 400ms then only the api would be called

[@hybridgamer4105]

But still this will still result in more api calls, one solution i can think of is caching the data fetched from the api and then filtering the data in the frontend itself to reduce api calls

[@felixfale964]

Thank you brother, your tutorial really helped me

[@Code_Complete]

I’m glad it helped!

[@HabibTamkin]

Hi I have a project the users table which I have to create a search bar and filtering the users but the API my partner back end did it now I become dizzy what should do? can you help me?

[@hiteshpakhan7783]

this helps a lot thanks man

[@yvnnhong]

thank you!!