Made withReactClip

Search Filter React Tutorial - Search Bar in React

P

PedroTech

Creator on the React channel

Watch on YouTube ↗

322K viewsNov 24, 202014:14 runtime

Learn how to create a dynamic search filter and search bar component in React from scratch. This tutorial walks you through building an application that allows users to instantly filter a list of data by typing into an input field. You'll master key React concepts, including…

Chapters

#react#clip#frontend

Project Overview

This video tutorial demonstrates how to build a real-time search filter component in a React application. The final product is a simple UI with a search bar that dynamically filters a list of names as the user types.

Sourcing Data

The project uses a static JSON file (mockdata.json) to simulate a data source. This file contains an array of user objects, each with properties like first_name, last_name, and email.

Tip
You can generate your own mock data for free using the website Mockaroo. This is a great way to get realistic sample data for development without needing a backend or database.

Implementing the Search Filter

The core functionality is achieved in three main steps: setting up the UI, managing user input with state, and applying the filter logic.

1. UI and Data Rendering

The UI consists of a single <input type="text"> element for the search bar.
The list of names is rendered by using the JavaScript .map() method on the data array. Each item in the array is rendered as a <p> tag within a <div>.
A unique key prop is assigned to each rendered element, which is a React requirement for lists.

2. State Management for Search Input

The useState hook is imported from React to manage the search term.
A state variable, searchTerm, is initialized as an empty string: const [searchTerm, setSearchTerm] = useState('');
The input element's onChange event is used to update the state. The handler sets searchTerm to event.target.value on every keystroke, capturing what the user types.

<input
  type="text"
  placeholder="Search..."
  onChange={event => {
    setSearchTerm(event.target.value);
  }}
/>

3. The Filtering Logic

The most critical part is chaining the .filter() method before the .map() method. This ensures that only the items matching the search criteria are rendered.

jsonData
  .filter((val) => {
    // Filter logic here
  })
  .map((val, key) => {
    // Render JSX here
  })

Important
The filter logic should be case-insensitive to provide a good user experience. This is achieved by converting both the data field and the search term to lowercase before comparing them using the .includes() method.

The filter function's logic is as follows:

If searchTerm is an empty string, return every value (val). This shows the complete list when the search bar is empty.
Otherwise, check if the item's name (val.first_name) includes the searchTerm. If it does, the item is kept in the array for rendering.

// Inside the .filter() method
if (searchTerm == "") {
  return val;
} else if (val.first_name.toLowerCase().includes(searchTerm.toLowerCase())) {
  return val;
}

Introduction & Project Demo

Hey guys, how's it going? I'm back here with another video. And before we get to the video, I just want to show you guys the final product right here. This is what we're going to be building: just a simple application in React where there's a search bar at the top and a bunch of names, as you can see. So, just an example, a piece of like a file with data, with fake data that we were using. And if I want to, for example, filter and search for a certain person, let's imagine I want to search for this person who is named Owen. I can just come here and search for Owen, and it will automatically filter for the person. I can search for whoever I want. If I want Liza, I can just say Liza, as you can see right here. It automatically searches and filters everything. So it's a really nice project. It's great for every single type of application, and I'm going to show you guys exactly how to do this.

Sourcing Mock Data

Okay guys, now let's go into the part of the video where I'll show you guys how to make this. Well, the data, first of all, that we're using is this file right here called mockdata.json. And basically, this file I got by—literally, there's a website called, I think it's Mockaroo. Yeah, it's really nice. I use it whenever I'm making this kind of applications which I need fake data. And you can literally just add fields right here, which you just put with the fields you want. And for this example, I just got like a simple set of data where we got people with first names, last names, and emails. And also gender. Yeah, this is the data file that we we got.

And basically, you can just click on download data. You can also choose the amount of rows. I chose a thousand because that was the one, the amount that we could get for free. And I just downloaded the data. I also changed this to JSON because it's currently CSV. I changed it to JSON and I downloaded the data and just put it into my React application. Which means now I have a file which is kind of like fake data that we can use in our application. If you want to use that, you can use that. If you want to use any data that you have, like you're acquiring it from a database, you can use it the same way. It's all the same, but I just wanted to get that out of the way.

Setting Up the UI and Rendering Data

So in this application, the only UI component we might want to have is just a very simple input. So let's create an input over here by writing input, giving it a type of text, and also, like, just so it looks a little bit better, let's just give it a placeholder and I'll say something like "Search..." Okay, that's fine, and then we can close the input. So basically, we just created our input, and that's literally it for the only UI components that we want to have in our application.

The next thing we actually want to have is we want to display the data, right? We want to be able to look at the data and see it in our screen. As I mentioned before, we have the mockdata.json. If you're using this one as well, you can just import it at the top. So import, I'm going to call it jsonData, and I'm going to say from './mockdata.json'. So we just got our data, and our data is literally just an array of JSON objects. So you can see this is an array. So we're basically importing over here, jsonData is an array containing all the different users we want to have in our application.

And if we want to display an array in our JSX, then it's as usual. We can just come here and say jsonData and we can map through every element in this array and just say val and also grab the key. And as usual, we can just return, for example, like a div, and inside of this div, we can display elements inside that are contained in each element in the jsonData array. We can see that each element in the array, if I open it up, each element in the array contains a first name, which is actually what we want to display right in our screen. We want to have an application which contains user's first names, and we want to filter for those. So I'm gonna come here and say val and I want to just display val.first_name. And you can see it also has autocomplete because it already knows that we have this. And you can see that after we do that, literally all the users appear in their screen. Why? Because we're mapping through every element in jsonData and we're returning a div containing the first name.

I actually want to just come here and give this, make this a paragraph. Not that this will change anything, it's just that I want to kind of style it a bit later, so let's make it a paragraph. So you can see we just added a paragraph tag to the name over here. I'm going to delete this. You can see they're kind of spaced out, as you can see. And obviously it looks horrible. So let's kind of give this a bit of CSS. And before we actually give the CSS, let me come here and give this a class name. So class name, I'm going to give this a class name of user. So the div, each user will have a class name of user, and I'm going to set the key equal to key so that we don't have an annoying warning that always happens in React.

Styling the Application with CSS

So now that we have that, we can start styling our application so it looks a little bit better.

The first styling feature that I actually want to to to do is basically just give this a display of flex, right? Because almost every single application I have, I make stuff have display flex because it's just a really nice way of making stuff responsive and centered. So I'll just justify stuff to the center. So justify-content: center and I'll also align-items: center. Okay, and also I really need to give this a flex direction because currently if I save this, it will ruin... the flex direction I need to make it equal to column so they are stacked on top of each other. And if I save this, you'll see everything will be centered and perfect. And they're also like kind of spaced out, so that's great.

But I also want to change the font family because I hate using this this font family that already comes. I love using Arial, by the way. So I just turn everything into Arial, as you can see. In my opinion, it looks better. And what else do we need? Well, let's just grab every, let's just grab the input and style the input a bit. So we want to make the search bar a little bit bigger. We also want to margin-top it so that it doesn't... it's currently like stuck right over here. We're going to make it like a little bit more, so 20 pixels. Let's see how it looks now. Yeah, it's kind of pushed down. And what else we want? We want to increase the width to like 350 pixels, something like this, and the height to like 40 pixels. Just make it a little bit bigger, a little bit better. Yeah, that's too big, actually. So let me make this 300 pixels.

And finally, just for the input, the last thing I just want to kind of like increase the font size and make it like 20 pixels maybe. Yeah, that's okay. We just have here a simple search bar where we can search for stuff. Obviously nothing is currently being filtered. And finally, I just want to add a padding-left here. By the way, this kind of irritates me a bit if I don't. So this kind of like pushes a bit and we're not writing stuff right over here. Now we finished styling our input.

So what do we want to style now? Well, the only thing I really need to style now is basically access all the paragraph tags because you can see they're kind of like spaced out and I don't want it, it's too spaced out in my opinion. If we make this zero, for example, it will just collapse everything together. I want to make this about like 12 pixels. That's too much. I want to make this like 10 pixels. Maybe the way it was before was better. No, this is actually better. So we can see right here. And I also want to increase the font size for this. So font-size, let's make this 18 pixels. Let's take a look. You can see it increased the size, it looks better, right?

So basically, this is how all the styling we're going to do in this application.

Managing Search Input with State

Now let's start working with the functionality of basically filtering everything in our data. So how we're actually going to do this? First of all, we're going to import useState because we want to have a state that is going to represent the search term that we're currently writing in our input, right? So basically if we import useState, we can come here and say const, and we're going to, for example, create a state called searchTerm and setSearchTerm. And we're going to make it equal to useState, and it's just going to be a string. Basically what we want is we want to search, this is going to represent whatever we're writing in this input. And in order to make that happen, we can give this an onChange event. So we're going to come here to the input and make this onChange. I'm just going to increase the size a bit because we're now writing a bunch of code and we don't need to see what's happening.

So on onChange, what I'm going to do here is I'm just going to grab the event and we're going to pass an anonymous function which to setSearchTerm equal to event.target.value, right? So we're basically just setting the the search term equal to event.target.value and now searchTerm is equal to whatever we write in this input, which is perfect, right?

Implementing the JavaScript Filter Logic

But here is where everything starts getting a little bit more interesting. So basically, currently we're just looking through the whole, like the whole file containing the data and we're mapping through every single element. So jsonData is just an array containing every element. So instead of displaying and mapping through every element in the jsonData to display, we don't want to display every element. We just want to display the ones that look similar to whatever we wrote in this search term in this search bar, right?

So basically, we want to use a JavaScript function which is very famous called filter. And if you don't really know how to use filter, just like with map, it's very similar. But if you've never worked with filter before, I definitely recommend just like watching a very like a small YouTube video on it. It's not that hard. However, you might be a bit confused if you've never worked with a filter before. I should have a video on filter, I have, I don't know if I do, but if I don't I'll actually make a video on it. It's a really interesting function. Basically what it does is we can come here and say instead of mapping through jsonData directly, we want to map through jsonData that is filtered. So we're going to filter through the jsonData first so that we're only mapping through the array called jsonData which has the the values that we want to keep. So the ones, the ones that look like whatever we wrote here.

So in order to do that, filter is just like map. We can write a value and I'm just going to create a function here. And inside of filter, we can ask to see what we want to keep, right? If I want to keep, for example, all the values, I can just say return value and literally it won't filter anything. But we actually just want to filter values if, first of all, we want to display it if we don't have actually, we haven't wrote like written anything in our search bar. So if searchTerm equals an empty string, then we want to just return val because we want to return everything to the data. So this is one case.

But else if basically the value.first_name, so the current value, the first name, and we want to turn it in equal to toLowerCase, and we want to ask if it includes the searchTerm when it's toLowerCase. I know this might look kind of confusing, but I'll definitely explain to you guys right now. Basically what I'm asking here is this function right here will loop through every element in jsonData, the jsonData array, and it's going to basically ask first, well, is the searchTerm empty? If it isn't, then it's going to come over here, which usually it isn't. So for example if there's a user called Paquito, you can see this guy right here, right? And imagine the searchTerm, if I wrote here pa, right, if I wrote pa... currently it's not working because we haven't finished it yet, but if I wrote pa, then obviously pa is part of Paquito. So what it's going to ask is, well, we want to return value if value.first_name, so if the current value we're looping through inside of the array, if we turn it equal to toLowerCase because this thing is lower, it's case sensitive. So if the current value, for example keto, includes a part like if the searchTerm that we added here, which is pa, which it does, then we want to return this. So it's only going to return the values inside of the array that contains inside of it somewhere the string that we wrote over here, if this is a substring of the values in the array. So I hope I didn't confuse you guys, but this is actually something that it's quite confusing, but this is the idea, right? You're only returning the values that are similar to whatever you wrote.

Final Demonstration and Conclusion

So I'm going to refresh this page right here and let's start working with this. You can see that after this it should be filtered, the array should be filtered, and we should be only mapping through the elements that are filtered. So let's come over here and let's try to search for, I don't know, Sergey. So let me write here ser, and you can see that automatically it starts filtering. And if I delete something, it filters accordingly to whatever I wrote currently. So I can search for Aussie, as you can see, and it filters perfectly. I can search for whoever I want. I can search, I can search for Brook, for example. And here's where the lowercase becomes important. If we didn't have this lowercase and I wrote here Vania, for example, then yeah, this should return Vania as it does. However, if we didn't have the toLowerCase, it wouldn't because the 'v' isn't capitalized, and in our data file the 'V' is. So we're just transforming everything to lowercase so we don't get that confused, and we're comparing just for the characters invade... like instead of comparing based on if it is lowercase or capital letters, you know?

So this is the basic idea, this is the project. I really hope you guys use this. I really enjoy making this. There's like so many use cases you can use this in and I really hope you guys enjoyed it. So if you enjoyed this video, please leave a like down below. Comment if you have any questions, I'm more than happy to answer you guys. And subscribe because I'm posting every single day and I really appreciate it. So yeah, I hope you guys enjoyed it and I see you guys next time.