Search Filter in React with Dynamic Data | API Call with Filter/Search in React

so for that first of all we will fix the data I will use an API to fix the data from that API so you may have data in your own from database or you have here the data a list of the data in Array so let's first of all fix the data so for repeat the data I will use Json placeholder this fake API and I will paste data from that API so let's write use effect hook use effect OK use it will render whenever we start our program at the first and this array dependency means that it will just run once okay whenever we render start our program if we write here a variable whenever we change the variable so then it will update it will call again by updating with that variable so that now it will just render to the start so to get the data I will use XCS Library dot git and we will assign this URL we will get the data of users so let's come here see this API provides a lot of post comments album photo to Do's but we will fix the data of users let's copy this URL and paste it here after that we will get a result we will show that result in our label in a state so let's create that cost data set data is equal to use state it is generator with us so we will um whenever we fix our data so that will be store Heroes we will just call see data and we will assign result.data we will assign all the data objects array to this data after that if there was any error cancel that error okay display that on console for us so after fetching the data so now let's display that for that I will write a development inside the duo I will write my code I will use a table first let's add some design to the alternative adding five which you write let's create our table inside the table we will display this creator a t hit first of all and table row and the table Loop we have table hit first you will display the ID of the user and in the name then email and also the phone so now let's display that render that dynamically so for that dynamical display we'll use map function data dot mark you will get data and an index Arrow function here we will use parenthesis because we don't need if we use parenthesis we do need return statement to write so here we will write our table row the key of this would be I and now let's display our data in table data type D dot ID first of all then name and then we should display phone so let's check it the API okay see that we have ID in this data name email and although also we have the phone let's sign a class name here table here on the top we will create a search bar in input field and we will filter our data based on that so before starting let's check it first how it looks like our data let's run the server npm run that we start so let's move to this URL so let's import our home the sound component in app.js so for that let's sign up put it and I will use it here let's check it now so let's depreciate yeah our data we pitched our data it looks like this so now let's create in a search field and we will filter our data come here to the home and create this search field control whenever we are writing data inside it we should store that in our variable and we should um filter our database on that okay so for that let's call unchange event filter okay we will call filter function and let's create filter function and we will filter our data now so to filter the data let's create one another state variable this would be records and see three cards and we will assign our data to this records okay and we will filter our record later okay so let's now write sit records we will call this one and inside this we will filter our data data dot filter call another function and filter F Dot name dot to lowercase dot value okay we will filter based on name and here we will use the records instead of data we will use records so let's check it now right now we don't have the data so let's come here and we will light it like this yeah here I will sit the records result.data and let's remove this data object with us yeah see it right now so where is our input field input to all change filter placeholder equal to yeah it is our input field so now let's search it based on that see it's removed Lena okay put this okay Elena and also Nico yeah it is filtering based on name for us so it was all of the about filtering the data in react.js if this video was helpful for you don't forget to subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 37,850

Keywords: search filter in react, search filter in react js, search filter in react with dynamic, react search filter, react, react tutorial, react search bar, react js, react filter, search filter react, react search filter api, search in react js, search filter, search react, build search filter in react js, learn react js dynamic search filter using json, implement search filter in react, search filter in react js using api, reactjs search filter

Id: KRJvlxhLXxk

Length: 9min 1sec (541 seconds)

Published: Thu Mar 23 2023