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

Подписаться 8 тыс.

Просмотров 214 тыс.

50% 1

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.com/a/TechStack... 🚨
Discord - / discord
Subscribe - / @code_complete
☕ Donate to support the channel! - www.buymeacoffee.com/CodeComp...
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete
☁️ FREE $100 for server hosting on Linode - linode.gvw92c.net/CodeComplete
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqcm.net/CodeComplete
-- 🔗 Links 🔗 --
💻 Code - github.com/CodeCompleteYT/rea...
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!

Опубликовано:

21 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 140

@Code_Complete 4 месяца назад

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

@freddie4818 11 месяцев назад

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

@mikeyTheDev 7 месяцев назад

Clicked in this video accidentally, REALLY an AWESOME tutorial mate

@vladkara Год назад

Awesome! Short and very clear!

@JesusOnAGoat 2 месяца назад

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!

@chantal3616 8 месяцев назад

Very helpful! Thanks! 😀

@oscarmelgarejo8563 2 месяца назад

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

@user-zg5jq8ro4w 8 месяцев назад

Loved you contents, thanks man

@codewar534 Год назад

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

@Code_Complete Год назад

Glad it was useful!

@WencelausMaina 9 месяцев назад

This was very helpful. Thank you very much.

@mateusbessadev 3 месяца назад

Thx bro, that helped me a lot!!!

@sadmanh0 8 месяцев назад

very well presented, thanks.

@bykeride2-dw1ly 9 дней назад

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

@tarunnaik3053 4 месяца назад

Thank You so much for this wonderful lecture ☺️

@hervogue 5 месяцев назад

Helpful! Thanks so much!

@BoldonBigLad 9 месяцев назад

Brilliant video and it has helped me a great deal.

@cyborganic 3 месяца назад

Very helpful, thank you!

@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 😃

@hiteshpakhan7783 5 месяцев назад

this helps a lot thanks man

@sadimridha5753 6 месяцев назад

That was great tutorial ❤

@AjayKasthala Год назад

Need more Tutorials like these Kudos to you

@Code_Complete Год назад

Thanks a lot!

@oluwatimilehinoyewo8010 Год назад

Wonderful tutorial man

@chungtunguyen6135 6 месяцев назад

thanks for this tutorial, very helpfull!!!

@garymiller8320 3 месяца назад

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!

@hajamydeen2025 11 месяцев назад

super explanation bro. more videos we need

@Anubis10110 8 месяцев назад

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

@adhinarayanakunchala 9 месяцев назад

thanks sir its wonderful tutorial for learning anything

@RobertAlexanderRM 3 месяца назад

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 3 месяца назад

Glad you found the video useful!

@MaxMov-sp8hr Год назад

Nice! Simple & Clear! ☀

@Code_Complete Год назад

Thank you! 🙂

@khurshedaalam7478 10 месяцев назад

shanadar Jabardast Jindabad bhai ek dum super

@abduab5453 16 дней назад

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.

@KJOB 9 месяцев назад

I learned something new thanks

@ShareVideo211 2 дня назад

thank you very much

@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.

@yvonnehong7285 4 месяца назад

thank you!!

@felixfale964 Год назад

Thank you brother, your tutorial really helped me

@Code_Complete Год назад

I’m glad it helped!

@farid9323 9 месяцев назад

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

@kishorek4319 Год назад

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

@Code_Complete Год назад

Thanks a lot!

@PeriklesPeriklesoglu 7 месяцев назад

thank you

@Racine14 Год назад

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

@Code_Complete Год назад

Thank you so much 🙂

@uchiha_sasuke_48 Год назад

Superb and simple project

@Code_Complete Год назад

Glad you liked it!

@rajatrai_ Год назад

you have gained a subscriber!

@Code_Complete Год назад

Thanks for subscribing!

@Thinkwellpub 3 месяца назад

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

@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

@csraju6623 Год назад

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)

@raymondwienand8177 15 дней назад

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

@segu_. 3 месяца назад

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 3 месяца назад

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_. 3 месяца назад

@@Code_Complete true!

@Patrick_Streams 5 месяцев назад

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

@turing4991 11 месяцев назад

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

@HaroonKhan-ov4ru 5 месяцев назад

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

@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 11 месяцев назад

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

@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

@cr7fanclubindiacr746 Год назад

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

@farhanbajwa4954 Год назад

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

@saivivekachutha8282 2 месяца назад

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

@khushwantdafre3230 10 месяцев назад

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 9 месяцев назад

Yes. You could use global state with the router.

@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?

@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.

@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***

@user-dj4qx7hh4i 3 месяца назад

why didn't you use the useEffect for dependency?

@armat_dt 2 месяца назад

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

@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 👍

@kakun7238 Год назад

one for the infinite scrolling in this select too

@Code_Complete Год назад

Thanks for the great suggestion!

@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?

@pulkitagrawal5054 10 месяцев назад

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

@crazygamepad6592 8 месяцев назад

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

@EMdragonKnight 10 месяцев назад

Similar answer I got from Chatgpt, but better explained.

@gonfreecs8077 Год назад

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

@sharath_jonnala 4 месяца назад

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

@sharath_jonnala 4 месяца назад

By the way this is a nice video

@Code_Complete 4 месяца назад

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

@prashant0597 7 месяцев назад

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

@nics.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 6 месяцев назад

@@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

@user-ud1qk3yi7m 3 месяца назад

short and descriptive

@Rashomon69 2 месяца назад

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

@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())

@AdityaRaj-ki3md 3 месяца назад

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

@Code_Complete 3 месяца назад

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

@nnasim5089 Год назад

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

@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.

@rakshithshetty6781 Год назад

Use typehead

@derarageremu 9 месяцев назад

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

@hemantjoon Год назад

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

@Code_Complete Год назад

Thanks a lot!

@fillpattanamontri8698 7 месяцев назад

12:29

@abdullahjama8404 6 месяцев назад

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

@AvinashYede-ck2cs Год назад

can you make tutorial on redux

@Code_Complete Год назад

Will do 😃

@ilirbajrami2902 10 месяцев назад

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

@farid9323 9 месяцев назад

You would need to debounce the input.

@ilirbajrami2902 9 месяцев назад

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

@hybridgamer4105 6 месяцев назад

@@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 6 месяцев назад

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

@mtt9119 9 месяцев назад

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 6 месяцев назад

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

@user-wg9nv5ms9m 2 месяца назад

add something

@Omar-gr7km 9 месяцев назад

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

@Omar-gr7km 9 месяцев назад

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 4 месяца назад

What should you do instead?

@Babajagrarox 3 месяца назад

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

@rahulnikam1279 3 месяца назад

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 3 месяца назад

Api crying

@prabhat4571 10 месяцев назад

No need to create state in app man

@gorkaurzelai5072 5 месяцев назад

No?

@p1k1m4ru 2 месяца назад

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