Search Bar in React Tutorial - Cool Search Filter Tutorial

In this video I will teach you guys how to build a cool search bar that filters through data. The search bar will also open a window showing the data.
Code: github.com/machadop1407/React...
-
❤️ Support the Channel: / @pedrotechnologies
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
-
Follow tim on youtube: • Video
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#PedroTech #react #reactsearchbar

[@alexlewis2944]

Tremendous walkthrough!! Thank you so much for taking the time to put this together! :D

[@kellyraymond8623]

This is the first tutorial I actually felt like I have followed. thank you for taking the time to be so detailed for us!

[@PedroTechnologies]

Glad it was helpful Kelly!

[@heintsi89]

This tutorial was just so amazing and it was told in a way one could understand easily. Implemented this to our school group project which uses "real" backend to fetch data from, so it helped us a lot!

[@PedroTechnologies]

Great to hear!

[@growthhacking9126]

Pedro my bro, Thank you for creating React projects. It is helping so many people including me on learning react. Hope to see more React projects soon. The only reason why I subscribed was you usually cover only one particular niche ie. React js.

[@PedroTechnologies]

I love making react projects for videos. Let me know anything in particular you want to see :)

[@sanntu9617]

It's not just the patience: - The baby steps explanation, - how well explained it is, - and the complete closure of the project/example. You're a beast Pedro! Thank you so much for share. Keep it up! 💪

[@danielekslin3155]

AND the most importent things of all.. he doesnt have an indian accent!

[@BaBa-pf3ol]

@@danielekslin3155 ok 'importent' lol then just go watch cn if it's the most important aspect for you.

[@jpcc1223]

Cara, é incrível esse conteúdo que você cria. Simplesmente ótima didática e a forma de ensinar é simples e objetiva. Seu inglês é perfeito cara! Você me serve como inspiração. Obrigado novamente pelo conteúdo!

[@SvetaSveta-ms4hi]

That's so dope! You're killing it, man. I'm lovin' it 💛

[@PedroTechnologies]

Thank you, appreciate the support :)

[@oscarmdiaz]

Fantastic!!! the explanation is smart and well put together that even someone fairly new to this can understand. I'll say it again: "Fantastic!"

[@dayanandab.n3814]

you have so much patience to teach us step by step. Thanks a ton to you.. This search design I am using on my new project.

[@nilankoor]

I'm surprised you only have 69k subs. You deserve a lot more! You are a lifesaver, thank you for the helpful videos.

[@harpreetsehmi9642]

Awesome video brother , i loved it , i watched almost more than 30 videos but i didn't understand what they do . But when i watch your video then my all doubts are cleared . Awesomw video brother ..... keep it upp ................... awesome content and nice explanation

[@filmonseare4597]

Thank you so much!, was just so amazing and it was told in a way one could understand easily

[@robmorris5732]

Great video. Be great to see the ref implantation too, and also how you’d write tests for the app with react testing library 😁

[@PedroTechnologies]

I love front-end testing! I have a video on RTL but I want to make a new one!

[@Chiby]

Sir you are really the best i have been battling with this for weeks and now its working 😊

[@mariamadepoju886]

This tutorial literally just saved myself and my teammates project. Thank you

[@maryjaneakpagbue1323]

This is so good! Thank you so much for creating this.

[@blockanese3225]

Pedro, love the videos, really really helpful. Did you ever make a video on password resets?

[@nishantagrawal6244]

Amazing. Thanks a ton man for such masterpiece :)

[@mtejera]

Thank you so much for your great explanation! I appreciate it a lot! ♥♥♥

[@UCSAmit]

I love your rhythm of teaching pedagogy.

[@sundar1956]

You are awesome 🙏 . Please keep on doing these kind of react tutorials .

[@PedroTechnologies]

More to come!

[@khandoor7228]

really nice i can definitely use this. Thanks Pedro!

[@PedroTechnologies]

Glad you like it!

[@sukanyadas4981]

Loved the tutorial. Thanks a load!!

[@preciousappiah]

very useful, thanks Pedro

[@chinmaykulkarni2879]

amazing tutorial buddy... helped me alot.. great job!!😀

[@jeromemarshall9248]

Thank you man! Well explained.

[@AibekToroev]

Thank you so much! I've learned so many new things from your tutorial...

[@PedroTechnologies]

Happy to help!

[@amatakchannel3735]

easy to follow, thanks!

[@thedyslexicwebdev1654]

Amazing, thank you so much for this!!!

[@user-iz3qs6ym6v]

thanks for the video. It really helps.

[@MaidSejdinovic]

You helped alot!! Thanks

[@aliozeir708]

Unbelievable from you man. Great video.

[@andresfelipeariasmarin8881]

thanks! was very easy to understand. 😁

[@williamivanpalacioscastane9316]

Thanks for the video! thats very good and help me to solve on my web

[@ankushchavhan1332]

You are awesome 🤩, Subscribed 🔥

[@devtawhid]

thank you so much. this video is helped me a lot.

[@Goutham-bp8cv]

Great explanation dude

[@dragosp.7635]

You're just a god! Saved my life.

[@islamic-videos2024]

thank you it was helpful

[@farwanadeem]

fantastic sir, helped alot

[@nataliagoryanina2738]

Thank you!! ❤

[@santiagoyeomans]

Very helpful tutorial, thank you!

[@PedroTechnologies]

Glad it was helpful!

[@gyanadeeppiriya6080]

Thanks sir you really helped me.

[@ThColinPereira]

Great video Pedro!

[@PedroTechnologies]

Glad you enjoyed it

[@blueblue9410]

Thank you Pedro. Amazing tutorial. Everything worked perfectly! The only thing is I'm using input.length instead of filteredData.length. That way when we type gibberish into search bar we can still delete it using the X icon

[@imacoder7122]

You are just awesome👏. Thanks and best wishes..

[@juanmanuelblancovargas9299]

Best tutorial, really help me

[@dawoodshahzad9082]

My brother I am able to learn react with your tutorials. Your tutorials are worth a lot. God bless you

[@PedroTechnologies]

Glad to hear that!

[@rupindersingh2674]

A big big thnkew man 🙏

[@eanan348]

Incredibly helpful 👍

[@saisravanth2821]

Thanks a lot it really helps alot

[@vikasni95]

Tquu brother, This video helped me in many ways 😊👍

[@PedroTechnologies]

Glad to hear that!

[@soulfibre6695]

Thank you, sir!

[@coderslav4505]

Nice Tuto, Man! Thx a lot! But, imho, to switching to the Search/Close image, it is better to use a new State Hook :)

[@raidenc9846]

Amazing tutorial!

[@workingfromhomemusic6832]

you deserve a medal, pal

[@bit-in-byte]

Thanks man 👍

[@adad8795]

#subscribed ! Keep posting such awesome tuts 🙌

[@fuliermichal96]

Brilliant react tutorial!!!

[@PedroTechnologies]

Glad you liked it!

[@wictortec5627]

Amazing video ! Thanks

[@lalitbasista5895]

thank you so much broo

[@charulatharamesh2213]

Recently addicted to u r channel,while i'm searching to learn a React js in YOU TUBE

[@niranjanjathar3748]

👍👍👍 amazing tutorial.

[@kumarmantosh7262.official]

Very supported video.. I am Indian. I watched a two video 1) //Search Bar in React Tutorial - Cool Search Filter Tutorial 2) //React Chat application

[@shaikhzaki3358]

Very informative video thanks for sharing knowledge with us..

[@anandls1]

Great video thanks man. New sub. Have you done anything with Webrtc and video?

[@rhiannonmonks6894]

Very cool!

[@junjietan2668]

Hello pedro, That's really good video which again recap the skills from that, i am just wondering will you make a video that regarding forget password and reset password section from that? Because i have seen various videos on class component which seems to be more complicated in that case. Tend to learn however personally not familiar with class component hence it could be a big issue on that .. Thank you very much. Have a good day.

[@l.seciltuncay7921]

great tutorial

[@proyectosvisualesful]

Great tutorial, excellent video, I have a question about how the same project could be created but with a database like supabase for example. Thank you

[@jameszawislak436]

Hey Pedro if I wanted to go about adding an enter functionality to the search like if I type something and hit enter it does the search how would I do that?

[@jocelinbouhelier4380]

hello thank you for your video it helped me to progress, I wanted to know, how to remove the dataResult div when you click outside the input? Thanks very much!

[@idan5930]

Thank you so much! Would it be the same if I get the data from a database instead of a JSON file? I wanna create a user search bar, wouldn't it be inefficient to get each user every single time a user refreshes the page?

[@nishanthcodes4576]

masterpiece

[@rahil-aliyev]

Thanks man, It's very useful video

[@PedroTechnologies]

Glad to hear that

[@abhaytiwari6411]

Great work 👏👏👏

[@PedroTechnologies]

Thanks a lot 😊

[@DhiniIndria]

Nice tutorial. Thnks a lot , helpd me so much ! btw how if i will get data from axios? thank u .

[@anggerprayugo1921]

Amazing! Great explanation! Thank you so much! 🤍

[@matildawang920]

Thank you for the awesome video. One thing I don't fully understand is the purpose of declaring the constant of "searchWord", is it to adjust the delay issue of wordEntered inside the handleFilter function? I don't really understand how the delay happens but i do notice when i tried to console.log it ..

[@sonamohialdin3376]

So good tutorial

[@kalikali9261]

Thank you Bro..^^

[@marypaul9627]

Hi Pedro thanks for good job,i have implemented step by tsep and its working but mine when i click the title i dont have a link am using database i want to navigate to the description of the book how do i do that?you have href point to a link but me i want descriptiontahts from db how do i do this pls?

[@worldclasscode1847]

Nice video! :)

[@FaTima-lr8yf]

Hey, thanks for the tutorial. I'm trying to use the same code with an actual database, I'm wondering what should i passe as 'data' in this line " " in app.js

[@saidmaroc8448]

Simple and clear, Thanks Pedro, a question that is not related to this video, the CSS: do you have any cheatsheet to share with us? I can't get it out without googling :(

[@PedroTechnologies]

I used to google a lot, but with time you build muscle memory. Understanding flexbox is crucial as well

[@kuyakevs8183]

Thank you for this useful tutorial. How about if the user click outside the search bar then the filtered search term will be remove also.

[@awaraamin6850]

Thank you

[@ivanbozveliev5335]

Hello, thanks for this search bar, it's so great. but i have a problem with the drop down menu when it goes down, my search bar just jumps up. How to fix it ? Thank you

[@ankushchavhan1332]

His channel is underrated according to his content

[@nogitsune6865]

Very nice 👍

[@ilugssolution]

very help tutorial

[@nonamemembers4494]

Thanks Bro

[@zakariazouazou7737]

thanks a lot

[@M4nudu45]

thanks bro

[@prateektiwari4116]

U r just great🔥

[@PedroTechnologies]

Thank you so much 😀

[@adad8795]

Awesome 🔥👍👍

[@priyaolefin7571]

How to select the values from dropdown and put in the search bar in your program?

[@ahsanali580]

Awsome

[@Simon-kj7on]

Hey Pedro, is there any option to connect this search with Firestore? Thank you.

[@melfordbirakor]

Thanks