No video

Search Filter React Tutorial - Search Bar in React

  Рет қаралды 319,566

PedroTech

PedroTech

Күн бұрын

In this video I will teach you guys how to make a Search Bar with a Search Filter in React. The values are filtered as you write on the search bar, and you are able to find the information you need.
More Advanced Search Bar: • Search Bar in React Tu...
🌟 Learn Programming Fundamentals on Brilliant: brilliant.sjv....
-
Fake Data: www.mockaroo.com/
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Please leave a comment on what topic you guys want me to cover next!
-
❤️ Support the Channel: / pedrotech
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: pedro@pedrotech.co
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3d0QauN
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- Search Bar
- Search Filter
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

Пікірлер: 496
@CodingWithDapo
@CodingWithDapo 3 жыл бұрын
little tutorials like this might seem like nothing but in reality, they do. Thanks man
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thank you! Really appreciate it!
@joshuaborseth
@joshuaborseth 2 жыл бұрын
Agreed ^^
@andresramirez4469
@andresramirez4469 2 жыл бұрын
I really like the smaller projects like this , they actually help me more than doing a whole full stack application with various moving parts
@jean2094
@jean2094 2 жыл бұрын
Hey, man. Thanks for this video. I'm working for the first time as a developer in a company. So I received a task this week to implement a search bar with react. Your video helped me a lot. Keep doing it, you're a great developer.
@matheuscamba
@matheuscamba Жыл бұрын
exactly the same with me // msm coisa comigo mano kkkk
@jineom9194
@jineom9194 Жыл бұрын
Same here for me haha hope you did well!
@mitarthsingh7515
@mitarthsingh7515 3 жыл бұрын
Honestly watched like 6 articles and 4 videos before this but this was what i needed. Super concise, to the point and very clear. Great job man :)
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Glad you liked it!
@turikmmm5069
@turikmmm5069 2 жыл бұрын
same here
@anilsunny4443
@anilsunny4443 2 жыл бұрын
Straight to the point, no wasting time on styling, no wasting in cmd prompt creating project. Straight forward and quick which got me started. Thank you so much
@itscartmanbrah4856
@itscartmanbrah4856 3 жыл бұрын
I was gonna search for this so that I can integrate this to the Pokémon application from the last video. You're simply amazing man. Keep up the good work
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Hahaha Awesome! Glad I could help!
@tcutinthecut
@tcutinthecut 3 жыл бұрын
I didn't expect for this to be so easy to implement into my application, as I was already pretty far along, but it was!!
@ankitmehrotra8519
@ankitmehrotra8519 3 жыл бұрын
One small point Pedro.. You are using includes which will filter exact value. You should use substr(0, length of searchTerm) and then compare for correct results.
@thequang9234
@thequang9234 Жыл бұрын
can you elaborate, thanks :)
@thippanayugesh8414
@thippanayugesh8414 3 жыл бұрын
I will make sure to like every video I watch and recommend it to my colleagues. These are very helpful for a beginner like me. Thank you.
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Awesome, thank you! Really appreciate the support!
@henryngann
@henryngann 3 жыл бұрын
Keep making videos, you are going to get popular for sure. I rather go to you then smaller youtubers because your explanations are just so much better.
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thank you so much! I really appreciate the support!
@sourabhthorat9550
@sourabhthorat9550 3 жыл бұрын
I spend a whole day to get the right solution and finally, I got this super explanation Thanks bro
@khandoor7228
@khandoor7228 3 жыл бұрын
Good stuff Pedro thanks! I enjoy these types of useful videos, even if you have done this before, no one does it the same and I always learn something new.
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Hahaha Thank you! Really appreciate the support and I am glad I could help!
@edwardlocnguyen
@edwardlocnguyen 2 жыл бұрын
This video beats everything else I've seen on KZfaq and on StackOverFlow. Straight forward and to the point.
@oshinbatra4319
@oshinbatra4319 Жыл бұрын
Thanks Man! your videos helped me a lot during my Early days as Web Developer.
@user-sn1rc5ye5k
@user-sn1rc5ye5k 2 жыл бұрын
I will say that again! You are doing amazing things my man, thanks a lot! I hope my comment will also be of help for your channel, bro! Make more videos please. I mentioned this the other day and I am going to say this again, you have some outstanding skills and I hope more people could see your job! Way to go!
@PedroTechnologies
@PedroTechnologies 2 жыл бұрын
Much appreciated! This kind of comments motivate me a lot :)
@jabss7847
@jabss7847 Жыл бұрын
this is the simplest yet very useful and helpful and easy to understand among all the other search videos tutorial. Thanks man !
@chahhatpandit9003
@chahhatpandit9003 3 жыл бұрын
was stuck at it for 2 days.. helped a lot.. thanks man....
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Glad to hear it
@nazneenshaikh8804
@nazneenshaikh8804 3 жыл бұрын
I am getting error...copied the same code says cannot read property toLowerCase of undefined
@nazneenshaikh8804
@nazneenshaikh8804 3 жыл бұрын
Can u please help me out
@dinushasenarath3050
@dinushasenarath3050 3 ай бұрын
@@nazneenshaikh8804 For anyone getting errors with toLowerCase - first try converting the value to a string by adding toString() like this .includes(xxxxx.toString().toLowerCase()). It should solve the most!
@chasec4897
@chasec4897 2 жыл бұрын
BRO, YOU ARE AN ABSOLUTE LEGEND. Im going to send you a dono with my first salary !
@og_LionKingGaming
@og_LionKingGaming Жыл бұрын
Best tutorial on search and filter. I was going through dev grey's react tutorial and got comfused in search component working. After watching your all foubt cleared. Thank you brother
@joelsjunk239
@joelsjunk239 2 жыл бұрын
This video helped me get out of a rut and back on track with my work. Thank you so much!
@nikhilarora6521
@nikhilarora6521 3 жыл бұрын
awesome work dude !! Keep on posting such amazing tutorials
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thank you! Glad you liked it!
@user-gnwolmgkqpcn15829
@user-gnwolmgkqpcn15829 2 жыл бұрын
You might not be able to assume how mush i appreciate your contents and the way you are delivering concepts. Thank you so much for your continuous work!
@yeminhtun2543
@yeminhtun2543 3 жыл бұрын
I'm really enjoying your tutorials. Thanks, man. Keep it up.
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thank you bro! Really glad you liked it!
@mujtabakhalid7010
@mujtabakhalid7010 2 жыл бұрын
This is what I was looking for . Thank you so much. keep pumping content. Goodluck
@kayaba_atributtion2156
@kayaba_atributtion2156 2 жыл бұрын
100/100 best tutorial out there! thanks pedro!
@PedroTechnologies
@PedroTechnologies 2 жыл бұрын
Glad you think so!
@roboriginal
@roboriginal 3 жыл бұрын
Man thank you a lot. Those quick and dirty tutorials are the best. I want to hug you
@INfoUpgraders
@INfoUpgraders 3 жыл бұрын
Amazing how simple and efficient it is to do, keep up the good work 💪
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thank you! I really appreciate it! Due to how states work in react, this is definitely a lot easier than it should be hahaha
@INfoUpgraders
@INfoUpgraders 3 жыл бұрын
@@PedroTechnologies For real
@bspraveen8212
@bspraveen8212 2 жыл бұрын
You are really brilliant, inspite being from mathematics background You are doing flawless coding. Keep doing such great video tutorials.
@raabisliman
@raabisliman 2 жыл бұрын
perfect, i deleted so many lines of my code after viewing your tutorial Thanks bro !
@omaralazzawi5305
@omaralazzawi5305 2 жыл бұрын
Best one explains search functionality thanks a lot Pedro.
@PedroTechnologies
@PedroTechnologies 2 жыл бұрын
Glad it was helpful!
@artemii8672
@artemii8672 2 жыл бұрын
Most iconic tutorial, thanks a lot!
@DiestroCorleone
@DiestroCorleone 2 жыл бұрын
I wasted more time trying to find a library that can do this for me, than watching your tutorial and learning this method. Thanks a lot. BTW, loved that you used Paquito as an example.
@yashwanthks9072
@yashwanthks9072 3 жыл бұрын
this video helped me and provided the coding i was looking for. my 10hrs of dealing with a same error finally solved. great content brother
@Gabrielmjo
@Gabrielmjo Жыл бұрын
Every single thing that i have any kind of doubt, i fall on your videos kkkkkkk Muito Obrigado Por toda a ajuda.
@gurleensingh9921
@gurleensingh9921 2 жыл бұрын
Thank you so much, Pedro ❤️🙏🏻. Appreciate your content . 🔥💛
@kaykodes3692
@kaykodes3692 Жыл бұрын
omg, thanks for this, i tried myself but it was a bit difficult when you first start react , really helpful , thanks
@Lakshan98
@Lakshan98 3 жыл бұрын
You literally saved my life man.Thanks
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Glad I could help
@elendil4543
@elendil4543 3 жыл бұрын
Efficient, fast and easy That's why I installed KZfaq for
@WillTalksCode
@WillTalksCode 9 ай бұрын
Not bad! I've been teaching myself react. I followed this tutorial, and made a slight change to let you search by first name or last name.
@thiagopadovani6654
@thiagopadovani6654 2 жыл бұрын
Best explanation of filtering an array in react. Thanks man, keep it up!
@onlyrealufos4146
@onlyrealufos4146 3 жыл бұрын
I'm proud we have such a perfect channel my fellow countryman.. Your english is perfect and we need more brazilians like you to export Q U A L I T Y ;)
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Hahaha thank you :) 🇧🇷
@mohsinbb6864
@mohsinbb6864 3 жыл бұрын
Realy Great Tutorial and very simple thanks Pedro Tecch
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Glad you like it!
@contrerasvivanco
@contrerasvivanco 2 жыл бұрын
oh my gosh this worked like a charm I actually can't believe it... thank you so much!!! as a constructive criticism, I skipped the whole css stuff but tbh its nothing compared to the amount of time I wasted watching other videos lol
@JoaoPiovensan
@JoaoPiovensan 2 жыл бұрын
Your content is just amazing, please keep doing this tutorials, u dont know how much is helping me with my study stuff.
@KarthikaKarthi14
@KarthikaKarthi14 3 жыл бұрын
You saved my time. Thanks man Love from India ❤️
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Happy to help :)
@konfigear4646
@konfigear4646 2 жыл бұрын
Thank you for keeping it short and straightforward:) Great video
@utkarshsrivastava4106
@utkarshsrivastava4106 2 жыл бұрын
Hey Man, Thanks for this video. Although very basic, such concepts help out even senior developers from time to time. Lots of love :)
@qgatss
@qgatss 2 жыл бұрын
You're a life saver, thank you so much for what you do bro!
@webmaster168
@webmaster168 3 жыл бұрын
Thank you so much!! I wish every tutorial would be like this 👍🏻
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Happy to help! Thank you!
@kashanakhun1258
@kashanakhun1258 2 жыл бұрын
Okay, so this video was so helpful, thank you so much, Sir
@assasyn0000
@assasyn0000 2 жыл бұрын
This actually helped me and i learned something new. Thanks a lot!!
@sundayokini6845
@sundayokini6845 2 жыл бұрын
I like your tutorials. You are unique in your style of delivery. Thanks so very much!
@KukovskyClips
@KukovskyClips 2 жыл бұрын
This helped me a lot, i was struggling for hours trying to do this, thanks!
@Optimus_Fitness
@Optimus_Fitness 2 жыл бұрын
I didn't expect this is so easy to implement in my application.Your are writing very clean code.
@ishisachan5775
@ishisachan5775 2 жыл бұрын
with lot of red marks and error
@schopra81
@schopra81 2 жыл бұрын
Thanks PedroTech. It's to the point and worked.
@chachachacha8778
@chachachacha8778 Жыл бұрын
just a simple tutorial...everything well captured🔥🔥
@karimkazia
@karimkazia 3 жыл бұрын
Omg I was looking for this lol !! Thank you sir as always. and I got it working in my project. except in this case i send an object to a component to render the output.!!! + also included other search criteria within the filter e.g find name or phone or status etc.
@leonardocoutinhodossantos1404
@leonardocoutinhodossantos1404 2 жыл бұрын
Great video man, thnks for this!
@newcode7847
@newcode7847 2 жыл бұрын
Thank you very much, I solved my tasks at work with your help!
@miracle_chuks
@miracle_chuks Жыл бұрын
Thanks, you just helped me solve a problem.
@K.Huynh.
@K.Huynh. 2 жыл бұрын
It's incredible, your solution really works with my current problem. The solution is really simple but bringing great results. Specially send a deep thanks to you. You save my life.!
@carlchua7369
@carlchua7369 2 жыл бұрын
Most useful and effective react search bar I found
@weslleyfelix5072
@weslleyfelix5072 2 жыл бұрын
Thank you so much my friend! I've learned a lot with this tutorial... I implemented this on react-native and its the same, pretty much!!
@nguyengianam499
@nguyengianam499 3 жыл бұрын
Nice bro. I just got enlightened by you watching this video
@cheapskate7
@cheapskate7 3 жыл бұрын
Hey man, thanks for taking the time to make this tutorial. It's bloody awesome! Sub!!!
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thanks for the sub! Really appreciate it!
@edgarsblog
@edgarsblog 2 жыл бұрын
Thank you very much, your tutorial helped me a lot for my interview task
@luizfederico9861
@luizfederico9861 3 жыл бұрын
Thanks a lot Pedro! Much easier than the overengineering on my side! Cheers
@score_
@score_ Жыл бұрын
thanks a lot man, I was trying to do this in a thousand ways and nothing worked lol, a little tip for those who are trying to do it in different components: create a useContext and put there the "search" and the other data variables.
@kasakonTea
@kasakonTea 2 жыл бұрын
Thank you, this was so helpful! Very clear explanation to follow along
@bumblebeesets
@bumblebeesets 3 жыл бұрын
I swear ure so underrated, thank u for everything
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
hahaha thank you!
@ritikashishodia675
@ritikashishodia675 Жыл бұрын
Thanks to making this video from last 2 day i was worried how to solve this problem and after see this code in my mind other logic also click that is solve one another bug in my project ✌👌
@pauldubourg9738
@pauldubourg9738 2 жыл бұрын
Great tutorial. Keep the good work.
@zainabideen8144
@zainabideen8144 2 жыл бұрын
Amazing explanation! Brilliant Guy. Simple and easy
@danavzaradel
@danavzaradel 3 жыл бұрын
THANK YOU. Brilliant content and very well explained.
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thank you!
@tentx652
@tentx652 3 жыл бұрын
super broo, easy to learn from you.most valuable concept ,thank you so much
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
So nice of you! Thank you for watching!
@amarnarute8399
@amarnarute8399 3 жыл бұрын
Short and to the point.
@minlapyae1562
@minlapyae1562 3 жыл бұрын
Great video as usual!!!🤩🤩 Could you do React testing tutorial?😁
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Yes! Actually unit testing is something I wanted to make a video about for a long time. Probably should make one on unit testing in React and unit Testing in a node/express api
@minlapyae1562
@minlapyae1562 3 жыл бұрын
@PedroTech Waiting for it 😁
@Dadaadad268
@Dadaadad268 3 жыл бұрын
@@PedroTechnologies that would be cool. I’m trying to get a job and they often want front-end testing experience!!
@khandoor7228
@khandoor7228 3 жыл бұрын
@@PedroTechnologies React testing is greatly needed and often avoided. Please look into this, i will definitely track.
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Awesome! It make sense, as most jobs require testing! SO i am planning on posting a video on this by the end of the week or beginning of next week!
@edmundodominguezagurcia7254
@edmundodominguezagurcia7254 3 жыл бұрын
Thanks a lot!! great tutorial and very simple to implement. Congrats!!
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Glad you liked it!
@1111pachu
@1111pachu 3 ай бұрын
Thanks. It s really herlps. Your explanation is very clear and. G.O.A.T.
@_blanc
@_blanc 2 жыл бұрын
thank you very much you saved me a few more minutes of sleep
@lefinancier2.0
@lefinancier2.0 2 жыл бұрын
Thank you so much you saved me one more time be blessed Pedro
@GuilhermeTeixeira
@GuilhermeTeixeira 3 жыл бұрын
Greetings from Brazil. Your video helped me a lot today! Valeu, mano! Parabéns pelo canal!
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Fico feliz! Obrigado!
@dartdragon4785
@dartdragon4785 3 жыл бұрын
This worked like a charm. Thank you!
@kandiman9111
@kandiman9111 3 жыл бұрын
Really really helpful and great explanations, thanks! Subscribed :)
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Awesome, thank you!
@OrincyWhyteDesigns
@OrincyWhyteDesigns 2 жыл бұрын
PEDRO!!!! Thank you so much !!!
@emanuelameh5722
@emanuelameh5722 2 жыл бұрын
Tried it in my project and it worked. muchísimas gracias!
@quasarkid4256
@quasarkid4256 2 жыл бұрын
This helped tremendously. Thank you
@wsglko1186
@wsglko1186 3 жыл бұрын
Great! clear concept with less code
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Thank you! Really appreciate it!
@teliiz
@teliiz 3 жыл бұрын
Melhor explicação e o melhor código. Outros que vi por aí duplicam o estado pra depois remover os diferentes da pesquisa... top
@ramonpaolomaran2253
@ramonpaolomaran2253 2 жыл бұрын
Caracas, que bizarro isso
@noob4head
@noob4head Жыл бұрын
Great video, thank you very much. This helped me out massively.
@vaibhavmishra8284
@vaibhavmishra8284 2 жыл бұрын
Very Nice and simple explanation for filter. Tysm bro it helped me a lot. 💻❤. Wishing for more subscriber to u.
@gabriel_lk
@gabriel_lk Жыл бұрын
Pedro você é um deus pqpp! Consegui implementar a ideia em um projeto, muito obrigado!!
@ThColinPereira
@ThColinPereira 3 жыл бұрын
I'm really enjoying these tutorials
@bhupendersingh7296
@bhupendersingh7296 2 жыл бұрын
Simple And Perfect Bro.
@chrisjones4402
@chrisjones4402 3 жыл бұрын
Thanks So Much!?! This was a huge help : )
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Glad it helped!
@ThColinPereira
@ThColinPereira 3 жыл бұрын
This was so well explained! Thanks Pedro
@nataliaoliveira7026
@nataliaoliveira7026 2 жыл бұрын
Best tutorial ever, Thanks!!
@hassanatbusari4723
@hassanatbusari4723 Жыл бұрын
Thank you for this video! It really helped me out
@openworld7585
@openworld7585 3 жыл бұрын
Thank you very much the tutorials solved my problem.
@PedroTechnologies
@PedroTechnologies 3 жыл бұрын
Glad it helped!
@arjun-de6dr
@arjun-de6dr 3 жыл бұрын
Great video, superb explanation. Your explanation is so simple and yet precise. Thank you
@rikanishimura6455
@rikanishimura6455 Жыл бұрын
Helped a lot, thank you so much!
Most Beginner React Developers Do This Wrong
13:47
Web Dev Simplified
Рет қаралды 230 М.
Search Bar in React Tutorial - Cool Search Filter Tutorial
31:53
Doing This Instead Of Studying.. 😳
00:12
Jojo Sim
Рет қаралды 36 МЛН
Zombie Boy Saved My Life 💚
00:29
Alan Chikin Chow
Рет қаралды 10 МЛН
Pool Bed Prank By My Grandpa 😂 #funny
00:47
SKITS
Рет қаралды 19 МЛН
React Interview Questions | Beginner to Advanced
26:42
PedroTech
Рет қаралды 26 М.
Context API in react | get the concept
29:00
Hitesh Choudhary
Рет қаралды 52 М.
React Search Filter Tutorial Beginner to Advanced
26:50
Lama Dev
Рет қаралды 261 М.
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,5 МЛН
Search Filter in React JS - Filter Through Results
8:53
Code Commerce
Рет қаралды 148 М.
Learn React In 30 Minutes
27:16
Web Dev Simplified
Рет қаралды 1,3 МЛН
React Hooks Course - All React Hooks Explained
1:26:21
PedroTech
Рет қаралды 1 МЛН
Future Proof Your Tech Career In the Age of AI
10:21
Travis Media
Рет қаралды 35 М.
Doing This Instead Of Studying.. 😳
00:12
Jojo Sim
Рет қаралды 36 МЛН