Build React Search Filter with React Hooks | ReactJS Search Bar | React Tutorials for Beginners

hey guys welcome back to another video in our react for beginners series so in today's video we will learn how to build a search functionality in our contact manager app using react hooks let me show you the demo so i'm fetching this contact list from our json server and i have added this new feature the search contact which will actually search the contacts in this contact list so we can search the contacts by its name or we can also search the contacts with the email address so if i type address gmail.com then it's going to give me the results based on the email address also our search is not a case sensitive so we can use the uppercase or we can also use the lowercase so it doesn't matter so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started all right guys so i'm using the same application code which we built in our last video react axios crud operations with json server so in this video we need to build the search functionality so we need to have a search bar here in the contact list component so let's go to the contactless component and add a search bar so i will go to the contact list component and inside the contact contactless component after this h2 tag we need to add a search bar so i'm going to add a div with a class name of ui search and if you have forgot that we are using semantic ui for this project so all the classes are coming from the semantic ui and now i'm going to create an another div and i'm going to give a class of ui icon and input all right then i'm going to create an input with type of text i'm going to give a placeholder of search contact and i'm going to give a class name so last name of prompt all right so now we have the search and we need to have the icon here so for the icon i'm going to add a icon here so i will add the i tag and i'm going to give a class name of search icon so this is going to give us a icon all right so we have made the changes in the jsx and what we will do is we need to create the state first so we are using the functional components so we cannot use directly this dot state or the state we need to use a react hook so we will be using a use state so what i will do i will click here and i will go to the app.js and inside the app.js we have our contact state which is actually the list of contacts we are managing so here i'm going to create a state so i'm going to add a constant so i'm going to add a search term and i'm going to add the set search term so this will be a use state and i will give the value as empty all right and then i'm going to pass the search in my contact list component so i'm going to copy this search and i will go to my component so this is my contact component and inside this contact component i'm going to add a prop as term and i'm going to give the value as search term and along with this search term i will also pass a click handler so whenever you type something in the search bar i need the value of the search term inside my app.js component so that i can make a filter on the contacts so for that i'm going to write a search keyword and this search keyword will have the search handler so i'm going to add a search handler here and we will get an errors so i need to define a search handler first so let's go here and add the search handler so i'm going to write a constant this search handler and this search handler is added so now we will not get the error all right so now we have added the two props here the term and the keyword let's go and access these props in our contact list and inside the contact list we already have the props so we can get all the props here so if i save it and if we go to the inspect element and let's go to the console and if i clear the console so here if i expand this then i can see the prop so i have the search keyword here and i also have the term so now we can make use of these props in our contact list now we have the props the next thing we need to do is we need to go to the input and inside the input we need to add the value so the value will be the props which we are adding dot the term and we will also add the on change so i'm going to add an on change event and on change event will have the function of get search so okay so let's go and write the get search term now so i have a get searched term and here i'm going to write the function of get search term this will be an arrow function and what we will do we are going to make use of use ref so i want to demonstrate how you can use the use ref so it's not required you can actually do it here you can directly write the event.target.value to get the value but we will make use of the user f so i'm going to import the use ref so i will add the use ref and we need to initialize this user f so i'm going to do the constant input element and this element is equals to use ref and the initial value will be the empty value and now you need to bind this user f to the input tag so if we want to bind that what we can do we can come here and we can add the ref and this ref will be equals to the input element all right so now we have bind the user f uh hook with our input tag and let's see now if we type anything something happens or not so i will go to the search term here and inside the search term i'm going to do a console.log and i will add the input element all right and let me inspect and let's see what actually happens so i go to the console i clear my console and if i type anything here let me type the page so if i type anything then you will see that we get an input where we actually added the user f element so we get all the information here so i can actually do the current dot value and this is actually going to give me the value of whatever i am typing in my input box i'm again saying that this can also be done with the event.target.value but we are doing this way it's just to demonstrate the use of use ref so now if i refresh it and i clear the console and now if i type the page then i should be able to see that whatever i am typing so now we need to pass whatever we are typing in the search bar to the app.js so for that i will just remove this for now and if i go to app.js we have added the search keyword as a prop so let's go and add this prop so i'm going to use props dot search keyword and inside the search keyword i'm going to add the input dot current dot value so whatever value i am typing all right so now we have the value and if i go to the app.js and in the app.js we already have the handler so this handler will actually have a search term as a argument and then we are going to do a console.log of the search term so let's see what we get here in the search term so if i clear this out i made a mistake so i'm going to do a console all right if i clear this out and now if i type the page then i'm getting the value as the page so what i'm going to do we will take the search term and we will actually set the state so we have already taken a state of search term and set system so we need to set this state so i'm going to remove this and i'm going to do a set search term and inside this i'm going to add the search term all right so now we have got our search term and now we actually need to filter the results based on this search term so let me add one more state so i'm going to add one more state and this will state will be the search results and it will be set search results and the initial value of this state will be an empty array so i'm going to add an empty array here and here what we will do is we will make a check so if our search term is not equal to equal to empty then what we are going to do we are actually going to filter out the results so i'm going to take the filtered result into a new constant so i'm going to add a constant here and this will be the new contact list and i'm going to filter the contacts dot filter and on the filters i'm going to get my contact back all right this will be an arrow function and we need to return the contact which actually matches the criteria so each of our contact is a javascript object so if i go to a network tab and if i click on any of the contact if i click on this preview then you will see that each of our contact is a javascript object and we need to make a search only on the values of these object like i want to make a search on contact.name and i want to make a search on contact dot email so for that what i'm going to do i'm actually going to use a object dot values and this is going to give me the values of the contacts so if i actually do a console log here so let me do a console dot log so that so that we can see what we are getting here so i'm going to save this and i'm going to go to the console and i will clear this out so let me remove a console log from here so that we don't get all the logs all right so now i have removed it and now if i actually type something so i'm going to type something and you will see that what we actually get so we get this object dot values and these values are only the values not the key of the object so now we need to make a search on this values so this is an array so what i'm going to do i am actually going to add a join here so we can join all the values so if i now type the page then i get this complete value and now this is like a string so we can make a search on this string so i'm going to remove this now and on this join uh let's change it to lower so that all the values first will be converted to a lowest case and then we are going to do and includes so if i do includes and we will make and include on the search term that the search term is included in this string or not so i'm going to add here the search term dot and we will make a lower case here as well so i made a mistake here so this will become too lower all right and now this string becomes object dot values we get the contact we make the join on the contact we make it to a lower case and then we check that this is included in the search term or not if it's included then it's going to return a true so let me return this so i'm going to return this so once we get this new contact list we need to update the state of the search results so now we have filtered out the results and let's set the state set state of search results and this state will be the new contact list but if the search term is actually equals to empty then in that case what we are going to do we are going to set this search results with our actual contacts so this will be the actual contacts all right and now we have made the search now the next thing we need to do is we need to apply this search results in our contact list so let's go to the contact list so where is the contact so this is our contact list and in our contact list initially we were passing the contacts but now we have to make a condition and that condition will be that if my search term so search term and the length of the search term is less than one then i need to pass the contacts but if it's not less than one that means i am typing something in my search bar and in that case i need to pass my search results so this will become search results all right and now let's give a try so i'm going to remove this and i'm going to refresh the page and now if i want to search something i'm going to type the page and i'm able to search if i type in caps lock then i'm still able to search if i type the outlook to check that anyone has an outlook email then i can still search and if i type some gibberish then there is no result so there is no results for that what we can do we can actually go to the contact list and inside the contact list we have this render so here we can actually do that if the render dot length is greater than zero if it's true then it should have the render contact list but if it's false then we need to show that no contacts available all right we have saved it and now we can try if we type some gibberish we can see no contacts available and if we have the contacts we can actually do the contacts and the rest of the functionality which we built the add contacts so let me add a new contact at brad b and this will be bay at the rate test dot com and if i click on the ad then i should be able to see the bread if i want to update it from brad bay one two three then i should be able to update it if i want to delete it i can delete it all this functionality is working so that's all i have in this video so it was a short video a small functionality but it's an important functionality which we usually build in our applications so i hope you like the video a thumbs up is appreciated don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one you can find the github link in the description so that you can or downl you can follow me on twitter and thank you thanks for watching

Channel: Dipesh Malvia

Views: 101,300

Keywords: react tutorial, react search bar, reactjs search filter, react hooks, react, javascript, react js, search bar filter react

Id: HkA6ZW0xgns

Length: 15min 44sec (944 seconds)

Published: Tue Feb 09 2021