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! 💪
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!
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.
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!
The search bar results appear to be present even when they are hidden, resulting in the user not being able to click on anything like buttons where the results would be. Does anyone know how to fix this?
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?
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 :(
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
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
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
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!
Hello. hanks for this, it helped me a lot. But if I want to search in the whole data file on all words and not only the title. What should I change in the code? For example if I search India I want all books written in Indian language and all books about India.
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 ..
TH-cam não permiti legenda automatica que nem fazia antigamente, por isso não tem legenda em portugues. Ja pensei, mas to com dificuldade de achar tempo no momento pra gravar o curso kkkkkkk
@@elionaimelo7 ahhhh kkkkkkkkk não botei na udemy nao. Eu qro fazer um curso melhorado pra udemy, gosto mt do que esta na codedamn mas qro fazer um melhor.
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?
How can I create a dynamic search? like first having a dropdown, choosing a language, then getting all the books in that chosen language in the search box?
this is nice, but sometimes a search bar , when user just click it without typing anything, the search bar will show recommended stuff in the window below the bar.... how to do that just curious
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
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
Create a Search bar where user can type a keyword and show the matching result in a table name , url , thumbnail, series things we will be observing is your coding standards in HTML,CSS and React skills
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?
sir how to filter on the basis of a long text like that of in stackoverflow which returns most relevant results based in the long text query..... like that of stackoverflow u can assume it i can't find this on entire yt 😐 would be very pleased if u could even provide me a link to a article or reference
This tutorial implies that the searchBar component is the only one that does the rendering, which is not the case for a real website where you use different components on a page.
![ละลาย (LALALYE) - DAOU PITTAYA ต้าห์อู๋ พิทยา [OFFICIAL MV]](http://i.ytimg.com/vi/wo6r9TgausI/mqdefault.jpg)
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! 💪
AND the most importent things of all..
he doesnt have an indian accent!
@@danielekslin3155 ok 'importent' lol then just go watch cn if it's the most important aspect for you.
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!
Great to hear!
This is the first tutorial I actually felt like I have followed.
thank you for taking the time to be so detailed for us!
Glad it was helpful Kelly!
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.
I love making react projects for videos. Let me know anything in particular you want to see :)
That's so dope! You're killing it, man. I'm lovin' it 💛
Thank you, appreciate the support :)
I love your rhythm of teaching pedagogy.
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.
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
This tutorial literally just saved myself and my teammates project. Thank you
Tremendous walkthrough!! Thank you so much for taking the time to put this together! :D
I'm surprised you only have 69k subs. You deserve a lot more! You are a lifesaver, thank you for the helpful videos.
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!
Recently addicted to u r channel,while i'm searching to learn a React js in YOU TUBE
The search bar results appear to be present even when they are hidden, resulting in the user not being able to click on anything like buttons where the results would be. Does anyone know how to fix this?
Sir you are really the best i have been battling with this for weeks and now its working 😊
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?
thank you it was helpful
Tquu brother, This video helped me in many ways 😊👍
Glad to hear that!
Fantastic!!! the explanation is smart and well put together that even someone fairly new to this can understand. I'll say it again: "Fantastic!"
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 :(
I used to google a lot, but with time you build muscle memory. Understanding flexbox is crucial as well
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
My brother I am able to learn react with your tutorials. Your tutorials are worth a lot. God bless you
Glad to hear that!
His channel is underrated according to his content
Great video. Be great to see the ref implantation too, and also how you’d write tests for the app with react testing library 😁
I love front-end testing! I have a video on RTL but I want to make a new one!
Great explanation dude
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.
you deserve a medal, pal
Brilliant react tutorial!!!
Glad you liked it!
You're just a god! Saved my life.
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
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
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!
Hello.
hanks for this, it helped me a lot. But if I want to search in the whole data file on all words and not only the title. What should I change in the code? For example if I search India I want all books written in Indian language and all books about India.
Hey Pedro, is there any option to connect this search with Firestore? Thank you.
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 ..
Pedro, teu curso tem legenda em pt-br? Já tentou colocá-lo tbm na udemy?
TH-cam não permiti legenda automatica que nem fazia antigamente, por isso não tem legenda em portugues. Ja pensei, mas to com dificuldade de achar tempo no momento pra gravar o curso kkkkkkk
@@PedroTechnologies Perguntei do seu curos na plataforma codedamn. Não desses vídeos do youtube. rs
@@elionaimelo7 ahhhh kkkkkkkkk não botei na udemy nao. Eu qro fazer um curso melhorado pra udemy, gosto mt do que esta na codedamn mas qro fazer um melhor.
@@PedroTechnologies Show! Fico no aguardo! Parabéns pelos vídeos, man! Sucesso!
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?
You are awesome 🤩, Subscribed 🔥
what if i want to click outside of the search result and it will close down but the input still remains, what logical should i implement
How can I create a dynamic search? like first having a dropdown, choosing a language, then getting all the books in that chosen language in the search box?
How to select the values from dropdown and put in the search bar in your program?
very useful, thanks Pedro
Great video Pedro!
Glad you enjoyed it
What if you want to display something (maybe a message) when there are no results for the search?
You are awesome 🙏 . Please keep on doing these kind of react tutorials .
More to come!
this is nice, but sometimes a search bar , when user just click it without typing anything, the search bar will show recommended stuff in the window below the bar.... how to do that just curious
Unbelievable from you man. Great video.
Amazing. Thanks a ton man for such masterpiece :)
fantastic sir, helped alot
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
easy to follow, thanks!
really nice i can definitely use this. Thanks Pedro!
Glad you like it!
Module not found:
Can't resolve '@material-ui/icons/Close' in ...
any help ,how can i download the module?
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
You are just awesome👏. Thanks and best wishes..
Best tutorial, really help me
Create a Search bar where user can type a keyword and show the matching result in a table
name , url , thumbnail, series
things we will be observing is your coding standards in HTML,CSS and React skills
This video is helped or not???? Please reply me
Thanks man, It's very useful video
Glad to hear that
Thank you so much for your great explanation! I appreciate it a lot! ♥♥♥
Hi, may i know how to apply this search bar into existing navbar page?
Incredibly helpful 👍
Thank you so much! I've learned so many new things from your tutorial...
Happy to help!
Thanks sir you really helped me.
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?
Loved the tutorial. Thanks a load!!
Very helpful tutorial, thank you!
Glad it was helpful!
thanks! was very easy to understand. 😁
This is so good! Thank you so much for creating this.
Thanks for the video, but I don't know why nothing happens when i type in just one letter until i type the second letter.
What if I'm sending requests to an API and I want to wait for the user to stop typing before I send the request?
Thank you so much!, was just so amazing and it was told in a way one could understand easily
You helped alot!! Thanks
Very informative video thanks for sharing knowledge with us..
amazing tutorial buddy... helped me alot.. great job!!😀
Great video thanks man. New sub. Have you done anything with Webrtc and video?
👍👍👍 amazing tutorial.
Amazing, thank you so much for this!!!
thank you so much. this video is helped me a lot.
Can I make it with HTML (not app.js)??? if can but how? please tell me❤
Pedro, love the videos, really really helpful. Did you ever make a video on password resets?
Thanks for the video! thats very good and help me to solve on my web
where's tho form tho? Generally there's a form that takes you to the search page if you hit enter or click the icon
I'm having trouble with my icon. Some how it's stuck on the left 😅 not inside the search bar :/
Great work 👏👏👏
Thanks a lot 😊
Hello Pedro this tutorial was dope...I have one query how to copy text to field when we do up down using arrow keys ?
Hope you'll reply
it ain't possible in this case cuz he's using divs element and not native select menu
Nice tutorial. Thnks a lot , helpd me so much !
btw how if i will get data from axios? thank u .
Thank you, sir!
Nice Tuto, Man! Thx a lot!
But, imho, to switching to the Search/Close image, it is better to use a new State Hook :)
can you display the result downside of dropdown ?
How can I display a message if the map function is empty?
How can I close the search results when I click outside
#subscribed ! Keep posting such awesome tuts 🙌
Amazing tutorial!
Superb 👍
Thanks 🤗
sir how to filter on the basis of a long text like that of in stackoverflow which returns most relevant results based in the long text query.....
like that of stackoverflow u can assume it
i can't find this on entire yt 😐
would be very pleased if u could even provide me a link to a article or reference
The new mui isn't working with the css file.
Thanks a lot it really helps alot
Amazing video ! Thanks
This tutorial implies that the searchBar component is the only one that does the rendering, which is not the case for a real website where you use different components on a page.
Thank you!! ❤