Implementing search in a React app

In this article, we will look at implementing a search box in a React app.

The application is a quiz application that lists quizes.

A link to the working demo is here: https://quiz-react-ochre.vercel.app/

You can also access the stackblitz project here: Stackblitz

Source Code: https://github.com/Paulvitalis200/quiz-react

We would like to filter a specific quiz by searching for it using the search box.

Here is how the app looks:

The code for this is in the App.tsx file,

Firstly, we import our quizes from the quizes.json file:

import data from "./data/quizes.json";

First, we create an array for setting up our quizes and initialize the state with the quizes we've imported.

const [quizes, setQuizes] = useState<QuizInterface[] | null>(data);

We then create our search box

<Search placeholder="Search" onChange={searchQuiz}></Search>

You can see that we have a search input box. We also have an onChange event handler tied to it. To read about how to use onChange and more about it, you can read about it in my other article here - onChange article.

We also have the function searchQuiz that's tied to onChange.

It's defined here:

  const searchQuiz = (event: any) => {
    const filteredQuizes = data.filter((quiz: QuizInterface) =>
      quiz.name.toLowerCase().includes(event.target.value.trim().toLowerCase())
    );
    setQuizes(filteredQuizes);
  };

We use the .filter() method which is an in-built javascript method that filters an array to match a specific criteria and returns the array of items that matches the criteria.

The criteria we want to match is that the quiz's name includes the input value that the user types in. We get the value that the user types in using event.target.value.

We use .includes() which is also an in-built javascript method that determines whether an array includes a certain value among its entries, returning true or false as appropriate.

We use .toLowerCase() on the strings to convert all the text to lowercase before doing the comparison.

To ensure that the user does not enter spaces only, we use .trim() on the input text to remove any whitespace before they input an alphanumeric character and to ensure we do not filter when they only input spaces as the search parameter.

Finally, we set the value of our quizes state to be the filteredQuizes.

 setQuizes(filteredQuizes);

Important Note: We perform the filter on the original array of quizes that we imported (data) and not on the quizes array that we defined using useState. This is important because we will always be updating the quizes state and if we filter on this state array, we will reach a point where we may get erroneous data since we filtered out the original array items 😬.

And that's it!

Happy Coding 🥂

Follow me on:
LinkedIn: Paul Otieno
Twitter: me_huchoma
Instagram: paul_dreamer_