Georgey V B I'm a self-taught web developer from India. I enjoy learning about new web technologies and working on projects. I hope that my work will assist other developers who are experiencing the same difficulties that I am.

Create a search bar in React from scratch

4 min read 1354

Create a search bar in React from scratch

A search bar helps to filter out what is necessary and find the user their desired result.

You might be thinking, there are several React libraries that can help you set up a search component in seconds — why waste your time writing a bunch of lines to create something that already exists?

Or, maybe you’re wondering why it isn’t always the best idea to use a library to implement a search bar in your project. Here are some thoughts on it.

Below is a detailed report of a popular package on npm.

A BundlePhobia report on the React Search Field package on npm
Source: BundlePhobia

Even if we consider the minified version of the library, it’s quite large to include in a project. Our code below is around 746 bytes, which is quite a lot less than any library out there!

Another advantage of creating a search bar from scratch is that it’s much more customizable than the libraries are. No matter how many libraries you use in a project, from state management to components, the basics are still quite important for a developer to know.

In this tutorial, we’ll try to replicate a search bar that tracks any changes in the input field and filters out the data present on the site. More specifically, we’ll build a search bar that filters the blog posts by their title.

Here’s what we’ll cover in this article:

  1. Setting up the starting files
  2. Generating mock data for the search bar
  3. Displaying the mock data
  4. Styling the search bar
  5. Making the search bar functional

Setting up the starting files

Go ahead and initialize a new React project using Create React App.

npx create-react-app search-bar-tutorial

Head over to the root file and remove all the unnecessary files.

We made a custom demo for .
No really. Click here to check it out.

Remove the unnecessary files from the root file

Open the App.js file and clear out the raw JSX elements.

Remove the raw JSX elements from the App.js file

Now, create an input field for the user to enter the query.

export default function App (){
  return {
    <div>
      <input placeholder="Enter Post Title"/>
    </div>
 }
}

Next up, let’s create some mock data for the search bar to filter through. You can either create your own mock data or simply head over to Mockaroo and generate some mock data easily.

Go ahead and enter the fields you need in the mock data.

Enter the fields you need for mock data

The number of rows you create should basically be the same number of objects you receive in the mock data, so it’ll be better if you reduce the number from the default of 1000. Make sure you set the file type to JSON.

Make sure you set the file type to JSON

Click Preview and copy all of your mock data into your code editor.

Copy the mock data into your code editor

Make a separate file — let’s call it mock-data.json — and paste the generated data. The JSON file will look something like this:

The JSON file with the data

Displaying the mock data

Now, before we actually make the search bar functional, let’s map through all the data and display it on the app.

Import the JSON data, like so:

import Data from "../mock-data.json"

Since the mock data is an array, we’ll use the JavaScript ES6 Map function to loop through each object in the array and display it using JSX.

{
  Data.map((post) => (
    <div key={post.id}>
      <p>{post.title}</p>
      <p>{post.author}</p>
    </div>
  ));
}

This is how it’ll turn out:

The search field results page with no styling

Styling is not necessary, but what’s the fun without any CSS? Feel free to skip to the next section if you’re good on styling demos.

Let’s try to center each element, including the search bar. The parent element has a class name of app, and so we’ll target that to center everything.

In the styles.css file, target the .app class name and apply the flex property.

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Search field results with limited styling

The posts still look boring. Let’s make a card for each post. Assign a class name to the JSX element in the Map function.

//App.js
{
  Data.map((post) => (
    <div className="box" key={post.id}>
      <p>{post.title}</p>
      <p>{post.author}</p>
    </div>
  ));
}

To make each card distinguishable, we’ll use the border property and make the corners rounded.

/* App.css */
.box {
  text-align: left;
  border: black ridge 1px;
  border-radius: 10px;
  margin: 3px;
  width: 20rem;
  padding-left: 10px;
}

Search field results with card styling

With the styling done, let’s now get back to the main focus of the tutorial — making the search bar functional!

Making the search bar functional

Now for the interesting part! We want to track each change whenever the user types into the input field. For this, we use the useState Hook and set the state whenever there is a change in the input field.

import Data from "../mock-data.json";
import {useState} from "react";

export default function App (){
  const [query, setQuery] = useState("")
  return {
    <div>
      <input placeholder="Enter Post Title" onChange={event => setQuery(event.target.value)} />
    {
      Data.map((post, index) => {
        <div key={index}>
          <p>{post.title}</p>
          <p>{post.author}</p>
        </div>
      })
    }
    </div>
 }
}

With that done, the next thing we want to do is see if the entered query matches any of the mock data. In our example, we’ll see if the post title matches the entered query. This approach will support both partial and identical matching.

In more basic terms, if the user enters a single letter, the function would return all post titles that will include that letter. Similarly, if the user enters a valid word, the search function will return an array containing post titles that have that word in it.

The Filter method is perfect in this scenario. It returns an array that satisfies the condition specified — the condition here would be to return a new array that matches what the user entered.

Data.filter(post => {
  if (query === "") {
    //if query is empty
    return post;
  } else if (post.title.toLowerCase().includes(query.toLowerCase())) {
    //returns filtered array
    return post;
  }
});

Let’s get this straight. If the user hasn’t entered anything, we can say the input field is not in use and the filter function will return the original array.

If the entered query matches any of the data (in our case, a post title from our example blog), then it will return a new array with the objects that match the user-entered query. To avoid any errors caused by the capitalization of letters, it’s best to convert both the user-entered query and the post.title from the mock data to lowercase. This way, no matter what the user enters, even if it is all lowercase letters, our filter will still be able to output a matching result, if one is found.

To display the filtered data, we’ll just combine it with our previous Map function.

Flow behind the display of our filtered data

Your final code should look something like this:

{
  Data.filter(post => {
    if (query === '') {
      return post;
    } else if (data.title.toLowerCase().includes(query.toLowerCase())) {
      return post;
    }
  }).map((post, index) => (
    <div className="box" key={index}>
      <p>{post.title}</p>
      <p>{post.author}</p>
    </div>
  ))
}

And that’s it! Good job on that hustle. The search bar should be up and ready. 🚀

A final demo of the search field we built!

Conclusion

Now that you know how to create a search bar in React from scratch, you can further customize it as per the project requirements. You can make it call a certain API, as well as display the data similarly.

Furthermore, we came across some JavaScript ES6 functions, which are super handy and can be used for other applications, such as sorting the filtered data to display the data per your desired order (date, alphabetical, time, etc.) using the sort() function.

Ultimately, the biggest advantage with creating from scratch is definitely how flexible the component is compared to other third-party packages out there. What are you going to make your search bar do?

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Georgey V B I'm a self-taught web developer from India. I enjoy learning about new web technologies and working on projects. I hope that my work will assist other developers who are experiencing the same difficulties that I am.

Testing accessibility with Storybook

One big challenge when building a component library is prioritizing accessibility. Accessibility is usually seen as one of those “nice-to-have” features, and unfortunately, we’re...
Laura Carballo
4 min read

Leave a Reply