{"id":16137,"date":"2023-01-12T10:33:28","date_gmt":"2023-01-12T05:03:28","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=16137"},"modified":"2026-01-16T18:26:12","modified_gmt":"2026-01-16T12:56:12","slug":"build-a-search-filter-component-in-react","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/build-a-search-filter-component-in-react\/","title":{"rendered":"Build a Search Component in React [just in 3 simple steps]"},"content":{"rendered":"\n

If you’re building an app that has a lot of data, whether in the form of a list or any other form, and you want the users to be able to search and get filtered results, then we need to create a way for the users to be able to find data they\u2019re searching for from the list easily. To cover this solution, adding a search and filter component to a React application can be a great way to improve the user experience by making it easier & time-saving for users to find what they are looking for. In this blog post, we will discuss how to add a search and filter component to a React application.<\/p>\n\n\n\n

What is a Search Component?<\/strong><\/h2>\n\n\n\n

Search bars or fields are a great way of helping users find what they need on the website. Not only this, they provide good analytics if we want to keep track of what our visitors are searching for on the website. Here we are going to use React to build a search bar that filters and displays data as the user types. With the help of React hooks and the JavaScript map and filter array methods, the result displayed is responsive with a functional search box. <\/p>\n\n\n\n

Let’s now see how a search component works in React.<\/p>\n\n\n\n

Before diving into the next section, ensure you’re solid on full-stack development essentials like front-end frameworks,<\/a> back-end technologies, and database management.<\/a> If you are looking for a detailed full-stack development career program, you can join HCL GUVI\u2019s full-stack development course<\/a> with Placement Assistance. You will be able to master the MERN stack<\/a><\/em> (MongoDB, Express.js, React, Node.js) and build real-life projects.<\/em><\/p>\n\n\n\n

Additionally, if you want to explore JavaScript through a self-paced course, try HCL GUVI\u2019s JavaScript certification course.<\/a><\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n

How does Search work in React?<\/strong><\/h2>\n\n\n\n

The search component in React works by allowing users to enter search terms into an input field and then filtering the results based on the search terms. This can be done by setting up an event handler for the input field to listen for changes and then using the search terms to filter the results. This can also be done with the help of JavaScript or a library like React-SearchBox, but for now, let\u2019s do this manually with the help of hooks and other things.<\/p>\n\n\n\n

To demonstrate how the search works in React, we\u2019ll be using the mock data to create a list provided freely by https:\/\/jsonplaceholder.typicode.com\/<\/a> in JSON format. We are going to use the user\u2019s endpoint from that API, i.e., https:\/\/jsonplaceholder.typicode.com\/users<\/a>. The JSON data that comes from the API looks like below:<\/p>\n\n\n

\n
\"\"
JSON data<\/figcaption><\/figure><\/div>\n\n\n

Don\u2019t get confused by the above photo; it\u2019s just an array of data displayed in JSON format. We will be using some of the data from the given array and displaying it in our React app to search and filter.<\/p>\n\n\n\n

Creating a React app from scratch<\/strong><\/h2>\n\n\n\n

Before moving on to the steps of adding a search component, first, we need to have a React application. To create a new React application, we are going to use create-react-app <\/strong>as it is the <\/strong>best way to create a single-page application.<\/p>\n\n\n\n

npx create-react-app demo\n\ncd demo\n\nnpm start<\/code><\/pre>\n\n\n\n
Steps to add a Search functionality in React<\/strong><\/h2>\n\n\n\n
Fetching Data<\/strong><\/h2>\n\n\n\n
To fetch data in React, we use the JavaScript Fetch API. It works by taking one argument and the path from where the data is to be fetched, and then returning a promise in a JSON object.<\/p>\n\n\n\n
In our previous blog, we have already discussed how to fetch and display data using API<\/a>, so we are not going to discuss that again here in detail.<\/p>\n\n\n\n
App.js file<\/em><\/p>\n\n\n\n
function App() {\n\n  const url = \"https:\/\/jsonplaceholder.typicode.com\/users\";\n  const [data, setData] = useState([]);\n\n  const fetchData = () => {\n    return fetch(url)\n      .then((res) => res.json())\n      .then((d) => setData(d));\n  };\n\n  useEffect(() => {\n    fetchData();\n  }, []);\n\n  return (\n    ...\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
Above, we have used the JavaScript Fetch API to fetch the data by requesting the endpoint and then storing the returned data in the data state using setData(d) and using the useEffect() hook to make the function run every time the page loads.<\/p>\n\n\n\n
Displaying Data<\/strong><\/h2>\n\n\n\n
Now we have the data, so we are going to display it. In the App.js file, add the following code in the return() statement of the function.<\/p>\n\n\n\n
function App() {\n\n  const url = \"https:\/\/jsonplaceholder.typicode.com\/users\";\n  const [data, setData] = useState([]);\n\n  const fetchData = () => {\n    return fetch(url)\n      .then((res) => res.json())\n      .then((d) => setData(d));\n  };\n\n  useEffect(() => {\n    fetchData();\n  }, []);\n\n  return (\n\n    <center>\n        {data.map((dataObj) => {\n          return (\n            <div className=\"box\">\n              <div class=\"card\">\n                <div class=\"category\">@{dataObj.username} <\/div>\n                <div class=\"heading\">\n                  {dataObj.name}\n                  <div class=\"author\">{dataObj.email}<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          );\n        })}\n\n      <\/center>\n\n  );\n\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
Here, we display three things: username, email, <\/strong>and name<\/strong>, from the data fetched from the users API endpoint.<\/p>\n\n\n\n
Creating a Search component in React<\/strong><\/h2>\n\n\n\n
So, now we have created our list of data. Let\u2019s add the search component and see how the searched data is going to be returned.<\/p>\n\n\n\n
Step 1: Creating an Input field<\/strong><\/h3>\n\n\n\n
The first step is to create an input field. It allows the user to enter a search query just by typing into the search field.<\/p>\n\n\n\n
<div className=\"input-box\">\n\n         <input\n\n             type=\"search\"\n\n             name=\"search-form\"\n\n             id=\"search-form\"\n\n             className=\"search-input\"\n\n              onChange={(e) => setSearchQuery(e.target.value)}\n\n             placeholder=\"Search user\"\n\n         \/>\n\n       <\/div><\/code><\/pre>\n\n\n\n
With the help of the onChange <\/strong>event handler, anytime the value of the input field changes, we set the value to searchQuery<\/strong> using the useState hook.<\/p>\n\n\n\n
Step 2: Getting search parameters<\/strong><\/h3>\n\n\n\n
Here, we are getting the search parameters from the data returned from the API.<\/p>\n\n\n\n
const search_parameters = Object.keys(Object.assign({}, ...data));<\/code><\/pre>\n\n\n\n
Step 3: Function to query the search<\/strong><\/h3>\n\n\n\n
Next, we need to use that search query<\/b> to search and filter out the data returned from our API.<\/p>\n\n\n\n
const search_params = Object.keys(Object.assign({}, ...data));\n\n  function search(data) {\n\n    return data.filter((data) =>\n\n      search_params.some((param) =>\n\n        data[param].toString().toLowerCase().includes(searchQuery)\n\n      )\n\n    );\n\n  }<\/code><\/pre>\n\n\n\n
Let\u2019s understand the above function. First, we have created a function search() that takes the data as an argument. Using the Array.filter() and Array.some() methods, we are checking if any of our Search query parameters include the value of our query (searchQuery).<\/p>\n\n\n\n
Step 4: Displaying the search results<\/strong><\/h3>\n\n\n\n
As the last step, we are going to use the data returned from the search(data) function to display our users list. <\/p>\n\n\n\n
{search(data).map((dataObj) => {\n\n          return (\n\n            <div className=\"box\">\n\n              <div class=\"card\">\n\n                <div class=\"category\">@{dataObj.username} <\/div>\n\n                <div class=\"heading\">\n\n                  {dataObj.name}\n\n                  <div class=\"author\">{dataObj.email}<\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          );\n\n        })}<\/code><\/pre>\n\n\n\n
And finally, your App.js file should look like below.<\/p>\n\n\n\n
import \".\/App.css\";\n\nimport React, { useEffect, useState } from \"react\";\n\nfunction App() {\n\n  const [data, setData] = useState([]);\n\n  const fetchData = () => {\n\n    return fetch(\"https:\/\/jsonplaceholder.typicode.com\/users\")\n\n      .then((res) => res.json())\n\n      .then((d) => setData(d));\n\n  };\n\n  useEffect(() => {\n\n    fetchData();\n\n  }, []);\n\n  const [query, setQuery] = useState(\"\");\n\n  const search_parameters = Object.keys(Object.assign({}, ...data));\n\n  function search(data) {\n\n    return data.filter((data) =>\n\n      search_parameters.some((parameter) =>\n\n        data[parameter].toString().toLowerCase().includes(query)\n\n      )\n\n    );\n\n  }\n\n  return (\n\n    <div className=\"container\">\n\n      <center>\n\n        <h1>Search component in ReactJS<\/h1>\n\n      <\/center>\n\n      <div className=\"input-box\">\n\n        <input\n\n          type=\"search\"\n\n          name=\"search-form\"\n\n          id=\"search-form\"\n\n          className=\"search-input\"\n\n          onChange={(e) => setQuery(e.target.value)}\n\n          placeholder=\"Search user\"\n\n        \/>\n\n      <\/div>\n\n      <center>\n\n        {search(data).map((dataObj) => {\n\n          return (\n\n            <div className=\"box\">\n\n              <div class=\"card\">\n\n                <div class=\"category\">@{dataObj.username} <\/div>\n\n                <div class=\"heading\">\n\n                  {dataObj.name}\n\n                  <div class=\"author\">{dataObj.email}<\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          );\n\n        })}\n\n      <\/center>\n\n    <\/div>\n\n  );\n\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
Output<\/strong><\/h2>\n\n\n
\n
\"\"
Search component in reactjs<\/figcaption><\/figure><\/div>\n\n\n
We often handle the search query functionality from the backend side by passing search query parameters in the API endpoint. And now we have seen how it can be handled from the front-end side. <\/p>\n\n\n\n
Now that you\u2019ve added a search component to your React application, you can easily allow your users to search for specific items or information. With a few simple steps, you can add a powerful and useful search component to your application.<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
In this blog, we learned how to add a search component to a React application and saw how the data is filtered from a bunch of data. The search component helps users in finding important information on the website quickly and also helps them in navigating to different pages. <\/p>\n\n\n\n
Kickstart your Full Stack Development<\/a> journey by enrolling in HCL GUVI’s certified <\/strong>Full Stack Development Course<\/strong><\/a> with Placement Assistance,<\/strong> where you will master the MERN stack (MongoDB, Express.js, React, Node.js) and build interesting real-life projects. This program is crafted by our team of experts to help you upskill and assist you in placements. <\/em><\/p>\n\n\n\n
Alternatively, if you want to explore JavaScript through a self-paced course, try HCL GUVI\u2019s JavaScript self-paced course.<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
If you’re building an app that has a lot of data, whether in the form of a list or any other form, and you want the users to be able to search and get filtered results, then we need to create a way for the users to be able to find data they\u2019re searching for […]<\/p>\n","protected":false},"author":1,"featured_media":72648,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[737],"tags":[804],"views":"66404","authorinfo":{"name":"GUVI Geek","url":"https:\/\/www.guvi.in\/blog\/author\/admin\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2023\/01\/Build-a-Search-Component-in-React-300x116.webp","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2023\/01\/Build-a-Search-Component-in-React.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/16137"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=16137"}],"version-history":[{"count":24,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/16137\/revisions"}],"predecessor-version":[{"id":90187,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/16137\/revisions\/90187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/72648"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=16137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=16137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=16137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}