Make a Search Bar with React (with API Calls) | Beginners Tutorial
ฝัง
- เผยแพร่เมื่อ 21 ก.พ. 2023
- 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!
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 61 [ซับไทย]](http://i.ytimg.com/vi/ux_yeQTff6E/mqdefault.jpg)
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
This was so great. Easy and clear to follow without being too slow. Thank you!
Awesome! Short and very clear!
Clicked in this video accidentally, REALLY an AWESOME tutorial mate
Great tutorial mate! Made this project at 12am at night while waiting for champions league clash between bayern vs psg.
Thanks man! Hope your team won 😃
Very helpful! Thanks! 😀
Awesome tutorial man! Helped me a lot to learn api in react js!🔥
Glad it was useful!
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!
This was very helpful. Thank you very much.
You can add debounce to save network calls… thanks for you effort
Loved you contents, thanks man
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.
Glad you found the video useful!
Helpful! Thanks so much!
very well presented, thanks.
Hey! Thank you so much for sharing your knowledge with us. This video was a big help for me.
Thx bro, that helped me a lot!!!
Very helpful, thank you!
This tutorial is great!! Thank you for explaining what each line of code is for, I learned a lot!
Thank You so much for this wonderful lecture ☺️
Brilliant video and it has helped me a great deal.
this helps a lot thanks man
Need more Tutorials like these
Kudos to you
Thanks a lot!
That was great tutorial ❤
thanks sir its wonderful tutorial for learning anything
thanks for this tutorial, very helpfull!!!
Wonderful tutorial man
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.
Nice! Simple & Clear! ☀
Thank you! 🙂
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!
super explanation bro. more videos we need
I learned something new thanks
thank you!!
Wonderful tutorial. Please do a common implementation across various JS flavors like Angular/React/Vue/etc to show the variance…👏
I feel like you really get it in react you should also get it in other frameworks. Concept is same.
thank you very much
shanadar Jabardast Jindabad bhai ek dum super
Thank you brother, your tutorial really helped me
I’m glad it helped!
Great tutorial! I was wondering if we should be able to fetch results in the useEffect hook.
Great idea! That way the data only needs to be fetched once
Helpful tutorial. In production apps, you'd need debouncing. Otherwise, you'd be calling the API on every key stroke.
this is so helpful i was wondering how will I fetch multiple endpoint
thank you
Perfect tuto.... I'm from DR Congo and I wish all the best dear
Thank you so much 🙂
Make More Useful tutorial like this.!! Iam ready to learn More from you bro..😍💜
Thanks a lot!
Question. How do you clear the search bar once you click on something? Great tutorial! Thanks!
Superb and simple project
Glad you liked it!
Just one word.... , superb.... Explanation
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)
you have gained a subscriber!
Thanks for subscribing!
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
one for the infinite scrolling in this select too
Thanks for the great suggestion!
yeah its looking good and understandable can you please explain the hole thing what you have done ? like not technical tell me in 5lines
Is there a way to have this feature search through two collections in a data base?
Nice tutorial! You haven't used async in fetch data funtion, then how it can be used as for performing async function fetching data?
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
good tutorial!
wouldnt make more sense to fetch just one time the api and then run a filter method when input changes?
thanks!
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
@@Code_Complete true!
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?
Yes. You could use global state with the router.
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
make sure the useEffect comes before any codeblock like if(){}
will it return closest matching word? for example if i type "food" will it be able to detect the word "foods"
Can i use different api from another website like google books api
how do i set the value selected under SearchResults back to Searchbox . Can you also share that ?
why didn't you use the useEffect for dependency?
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
Can you please make a video how to implement binary search in this?
By the way this is a nice video
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
Similar answer I got from Chatgpt, but better explained.
would be greate if you can cover FE interviews system design questions on this channel
Subscribed!!
Thats a great idea! Will look into it 👍
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?
Can you make another video same as this but the API call using redux and show a list whatever inside in API.
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
At 15:50, I didn't understand how you evaluated those variables in the return statement as Boolean ?
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
@@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.
short and descriptive
is it okay to use debounce?
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
@@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
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
Can you tell me what should i do to automatically hide the search list if I scroll the page?
use the propertie of your input html element, onFocus to show the suggestion and the items and onBlur to hide them
it works when it is lowercase but it deosnt work when it will be uppercase
Good catch, it should be user.name.toLowerCase().includes(value.toLowerCase())
what if i have my own API, im getting an error 'products.filter is not a function'
You should try logging out what products is. This likely means its not an array and could be an object or undefined
What is the difference in creating React application using npx create react app or using vite creat react app?
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
@@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?
Very nice tutorial, can you tell us how you integrate Google or Bing Search API? In react app thanks
Use typehead
This does an API request on EACH change? Isn't that a HECK of a lot of API calls?
12:29
The video is great but if word wrap was on it will be easier to go with it.
Good point, thanks! Will use it in my future videos
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***
lazy me didn't make alot component to make the react app look simpler and more organized
can you make tutorial on redux
Will do 😃
its great but make video of the same project by using next 13 app router.
Use filter on server side bro.. dont take all the datas from API just to filter it in front-end..
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.
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
isn't this going to skyrocket your hosting bill by making an api request in every key stroke?
You would need to debounce the input.
@@farid9323 can you please explain a bit what do you mean with "debounce"?
@@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
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
add something
man use time staps, so whoever wants can chose the part they are looking for.
No need to create state in app man
No?
That poor API. Getting called with every letter typed or deleted 🤣
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.
What should you do instead?
Why so much prop drilling, is it a standard practice?
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 ❤
Api crying
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
wrong method.
Why don’t you teach the correct method ?
To the point. Amazing Job
Looking Forward for your new videos.
Thanks for this
Thanks a lot!
Muchas gracias muy bien explicado gracias
¡de nada!