React Search Filter Tutorial Beginner to Advanced

hello my friends today you are gonna learn how to search items in react we are gonna begin with a basic searching method using data with a thousand records and then we will search items using multiple properties and finally we will go ahead and search items in a backend server i think it's gonna be really useful because it's one of the most important concepts for beginners if you are ready let's get started okay firstly i created a react app as you can see there is an empty project so what i'm gonna do is creating here an input i will say input and class name will be search let's give a placeholder i'm gonna say search and let's see okay as you can see it's here and under this input i'm gonna write a list of names let's create here a list ul class name will be list and inside this list we are gonna have list items and let's say john maybe second one like that okay of course we have some styles here let me show you we have css file here as you can see there are some basic styles here just margin padding text align nothing complex okay so what i'm gonna do is instead of writing them one by one i'm gonna use this javascript file and as you can see we have an array here which includes our user information first name last name email and gender and there are a thousand records here like that so we are gonna use this array let's import this i will come here and say import users from users file so i can use it here i will say users and i'm gonna use map and for each user i'm gonna return this list item and right now instead of john i can use first name i will say user dot first name let's see okay all those names are here perfect so what i want to do is when i write something here for example fe is gonna search for those letters and find those names firstly we should figure out what we are writing inside this input how we are gonna do this it's really easy i will just create here a use state i'll say const let's say query and set query and it's gonna be use statehook and at the beginning is going to be an empty string and i'm going to come here let me close this sidebar and i will say on change method i'm going to take event and whenever we change this input we are gonna change this state we are gonna set it again so i will say set query and it's gonna be event target and value let me write it here i will say console.log and query and let's see what's gonna happen i'm gonna open my console and as you can see there is an error here that because we didn't use any unique key for our list as you remember in the users array we have unique ids id12 and something like that we can use them as a unit key so i will come here and i'll say key it's going to be user dot id i'm going to refresh okay perfect so let's write here something i will say a and as you can see it's here b c whatever i write here perfect right now we have query in this case i'm able to filter my users how we can do this before writing here let me show you maybe here i will say users array and i'm gonna use filter and for each user i'm gonna search for something i will say if user dot first name includes let's say f and e is gonna show us a new array which includes those letters let's see as you can see there is a new array here and there is only one user which includes f and e but there is a problem here as you can see we have helix here the problem is this f is capital letter but we are actually searching for lowercase f and e so what i'm gonna do is transforming those first names to lower case like that let's see again and right now as you can see there are six items felix fahren 4d and others it's that easy so let's delete here and apply for our users here so instead of all those names i'm going to filter this i will say filter for each user if user dot first name to lower case includes any of our query remember it's here whatever we write inside this input it's going to take that string and search for it here let's close here i will say f and e and as you can see there here all those names let's say a outdoor it's that easy and this is the basic version of search algorithm let's jump into other one sometimes not sometimes mostly we don't have that basic list if you remember in our array we have name surname email and other things so we should be able to search for their name or surname or email address or whatever we are gonna handle that here but first let's create a table and show other user information so i'm gonna delete this list instead of this list we are gonna use table actually we can create new component here i'm gonna say table.jsx let's create our function and i'm gonna create here a table let's create here t body and inside firstly i'm gonna write my titles to do that we are gonna use tr by the way you don't have to know anything about table don't worry about here first one will be name let's duplicate this surname and let's say email let's use it here and you can see better i'm gonna call my table component like that and let's see okay as you can see our titles are here and here another tr but this time i'm gonna use td and i'm gonna show first name surname and gmail.com let's see okay perfect it's gonna work like that of course we are not gonna write them manually instead i'm gonna take here a data prop and i'm gonna cover this tr i will say data dot map for each item inside this data i'm gonna return this tr of course don't forget your unit key here item dot id remember this data will be our users here we are just gonna send it as a prop in this case i can use item first name item surname what was the name i'm not sure okay last name it's gonna be dot by the way last name and email okay let's pass this prop here i will say data it's gonna be users remember we imported this here let's see okay all items are here perfect so how i'm gonna filter those users i'm not gonna do this operation here instead let's create another function i'll say const search function it's going to take a data and it's going to return a fill to its version i will say data dot filter for each item remember we are doing this for the first name if item first name to lowercase and if it includes query oops includes it's gonna return those data so let's use this function here i will say search function and for data remember here i'm gonna pass my users so it's gonna take those users and filter all users it's exactly the same thing as we did before i'm gonna write f and e as you can see there here but it's searching for only names what about surname and email basically i can do the same thing for others i can copy here and i will say search for first name or search for last name or search for email let's see what we have right now and as you can see we have more data here because it's searching for name surname and email our letters are here for second one it's in email here again and for this one it's in surname basically it's searching for everything here let's say cd as you can see it's here like that but it's not the efficient way but because we might have maybe gender age job title or whatever it might be so writing them like that it's not a good idea let's make this easier so what i'm gonna do is taking first name last name and email from our users and use it here in one line however i'm gonna do this firstly let's write here our keys let's say keys it's gonna be an array and first one will be first name last name and email of course you can write here any other things gender job title whatever inside your array and whatever you want to search for but for this example i'm gonna use just three of them let me show you how i'm gonna do this i will say console.log and let's say users first item i'm gonna open my console and as you can see it's our first user but how i'm gonna take its first name its email and its last name i can use those keys if i come here and say first name for example as you can see we have its name if i say email it's gonna give me its email it's that easy so basically i can map through those names and i can use them here let's delete here i will say for each keys but this time i'm not going to use filter or map i'm going to use some method that because we are going to search for three different properties here it can be in first name or last name or email and this key basically says if our query inside first name or last name or email as we did here before remember you are using or or or it's gonna do the same thing so i will say for each key item and key to lower case again and includes and query again we have users here we are gonna take each user and it's gonna search for each key inside this user as we did here users array and each item in this example it's just first item and each keys in this example it's email let's play it here and let's see what we have let's refresh the page and close here i will say f e and as you can see it's exactly the same result here here here and here like that okay right now we know how to handle more complex tables like that but let's take care of a little bit advanced method because in the real world example we generally hatch those data from any server any api so instead of storing all data in the client side we are gonna fetch them from api and we are gonna search in the backend server and in a real world example we never had thousands of records like that it's too expensive to fetch data in that way so what we are doing we are fetching first 10 data or 100 data and in the client side if user wants to reach other records they can just use pagination or infinite scroll or only this search button basically we are gonna fetch let's say 10 data and we are gonna use this input when we search for any letters we are gonna fetch it again and again let's do that okay i created everything for you this is a react application everything is same of course i deleted that function we are not sending any data for now and i created an api here let's see what's inside as you can see it's a basic api we are gonna use node.js express framework and it's gonna list some five thousand part number and we will be able to make any catch or post or any other requests of course it's just an example i'm using node.js here it can be any other languages or frameworks doesn't matter so let's make a get request in our application let's send a response i will say response and json and i'm just gonna say hello let's see here it's our empty application i'm gonna call localhost 5000 and as you can see it sends this string it works like that so instead of hello i can send my users as you can see i created these users here it's exactly the same array of course it can be any db but in this example i'm gonna use exactly the same array here let's say import users from users let's send this users and let's see again and as you can see all data is here perfect so how i'm gonna fetch all those data here let's come inside our client site source and app.js what i'm gonna do is creating user factor use effects and my dependency will be empty for now and i'm gonna say const fetch data or fetch is going to be an async function because we are fetching data and i will say cons response and i'm going to use here axios you can use javascript fetch also it really doesn't matter import axios from axios and i will say get methods and i'm gonna use my url localhost 5000 of course await here we should await this process and when i fetch this data i'm gonna set it inside newviewstate i will say const let's say data set data and new use date at the beginning it's going to be an empty array and whenever i fetch data i'm going to set it again that data is going to be response and data let's call this function here fetch users so whenever we run our application it's going to call this function not because we don't have any dependency here and it's going to update our data let's use it here and see what we have and as you can see it already fetched all those data perfect but as i said we are not going to fetch all of them we are going to send let's say first 10 items so i will come here and i can use splice method beginning from 0 and ending at 10. let's see i'm gonna refresh the page as you can see just 10 data so what i'm gonna do right now we don't have all those items so we cannot search in our client site so what i'm gonna do is whenever i write something here fetching these data again and again of course according to these letters to do that we can use to do that we can use request and query what i mean by that as you remember to fetch this data we are using this url but also we can send any query here probably you have seen this question mark and some query in any website we are gonna do exactly the same thing our query will be any letter here and our server is gonna take this letter and search for this in the db or like our example in the json file but how we are gonna reach to this query i will say const let's say query it's gonna be request query and q that because i'm going to use just q here and when we search for anything it's going to take it and assign in this variable and also you can use it like that you can just structure that it's exactly the same thing let's see what we have actually i will say console.log and q i'm gonna enter let's see what we have i'm gonna open my terminal it's here as you can see it's here let's say lamadev enter and it's here and i'm gonna use exactly the same function as we did before in our client site remember keys search function it's gonna return this filtered data and instead of user we can use search methods and users like that okay let's see i'm gonna write here f and e i'm gonna enter and as you can see it returns only those items here here here it works perfectly let's change here perfect it works so i can use it in my client side here when i use these inputs i can take it as a query and whenever i change here i can fetch data again and again so what i'm gonna do is changing my user fact here instead of codes i'm gonna use backtick and inside i'm gonna use query and it's gonna be whatever inside my query here like that it's that easy in this case we should write here our dependency it's gonna be query it means whenever it changes run this function again and again let's see right now i'm gonna refresh first and items i'm gonna search for something and it's fetching those data perfect if i open my console oops here and choose network when i write here something as you can see it's fetching data again and again but searching item for the first letter or second letter is not the common usage so what i'm gonna do is writing here a limit for the first two items it's gonna just ignore when i write here the third item is gonna search how we are gonna do this i will come here and say if query dot length equals 0 or query dot length greater than 2 just fetch this data why i'm using 0 here it's because the initial state when we refresh the page when we're on our application we are not going to have any query in this case it's going to fetch those items and when i write here a letter as you can see it's not changing second one not changing and third one as you can see it's fetching data it's that easy and if you are using mongodb of course instead of here you can say users you can write here your user model and you can say find methods mongodb accepts and a reject squad it was searching like that or not i'm not sure but if i remember correctly it was like that you can search for your query and after that you can take this user and send it here basically it depends on you i don't know which tv you are using which framework you are using but it works like that of course if you are thinking your server is too weak to handle that or if you have thousands of maybe millions of records you shouldn't use it like that you should use any cloud servers like amazon cloud search or elasticsearch but there are more advanced concepts i don't think i can make a tutorial for them in this channel because it's kinda beginner friendly tutorial channel but if you want to know just let me know in the comments okay that's all i hope you liked it if you learned something new today please like the video and you can support la mader using the join button or the link in the description below and don't forget to follow lamadev social media accounts and that's all i hope i will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 249,125

Keywords: react, react search, react filter, react search filter, react search bar, react search filter api, datatable, datatable search, react datatable, react search function, search engine, react server side search, react backend search, react filter arrays, react map, react tutorial, react for beginners, lama dev, javascript, react.js

Id: MY6ZZIn93V8

Length: 26min 49sec (1609 seconds)

Published: Thu Feb 17 2022