{"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":"2023-11-29T17:19:00","modified_gmt":"2023-11-29T11:49:00","slug":"build-a-search-filter-component-in-react","status":"publish","type":"post","link":"https:\/\/guviv3.codingpuppet.com\/blog\/build-a-search-filter-component-in-react\/","title":{"rendered":"Build a Search Component in React [just in 3 simple steps]"},"content":{"rendered":"\n

Getting Started<\/strong><\/h1>\n\n\n\n

If you’re building an app that has a lot of data whether in the form of a list or in 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 search component<\/strong><\/h1>\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 does a search component works in react.<\/p>\n\n\n\n

How does Search works in react<\/strong><\/h1>\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 API looks like below:<\/p>\n\n\n

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

Don\u2019t get confused from 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 display it in our react app for the purpose of searching and filtering.<\/p>\n\n\n\n

Creating a react app from scratch<\/strong><\/h1>\n\n\n\n

Before moving onto 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><\/h1>\n\n\n\n
Fetching Data<\/strong><\/h2>\n\n\n\n
To fetch data in react we use 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 an 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 making a request to the endpoint and then storing the returned data in data<\/strong> state using setData(d)<\/strong> and used 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 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 searchQuery<\/strong> 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() <\/strong>and Array.some() <\/strong>methods we are checking if any of our Search query parameters include the value of our query includes(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 back end 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><\/h1>\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. Search component helps the users in finding the important information on the website quickly and also helps them in navigating to different pages. <\/p>\n\n\n\n
Hope you learned a lot from this blog but don\u2019t stop your learning in React.js here. Become a Full Stack Developer by joining our industry-leading project-based career program on Full Sta<\/a>ck Development offered by Zen Class which provides you with 100% job placement support, globally recognized certification, mentors support from top product based companies, and many more. <\/p>\n","protected":false},"excerpt":{"rendered":"
Getting Started If you’re building an app that has a lot of data whether in the form of a list or in 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 […]<\/p>\n","protected":false},"author":15,"featured_media":16140,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[737],"tags":[804],"views":"1447","authorinfo":{"name":"Tarun Singh","url":"https:\/\/guviv3.codingpuppet.com\/blog\/author\/tarun\/"},"thumbnailURL":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-content\/uploads\/2023\/01\/How-to-add-300x169.png","jetpack_featured_media_url":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-content\/uploads\/2023\/01\/How-to-add.png","_links":{"self":[{"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/posts\/16137"}],"collection":[{"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/comments?post=16137"}],"version-history":[{"count":10,"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/posts\/16137\/revisions"}],"predecessor-version":[{"id":33660,"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/posts\/16137\/revisions\/33660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/media\/16140"}],"wp:attachment":[{"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/media?parent=16137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/categories?post=16137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guviv3.codingpuppet.com\/blog\/wp-json\/wp\/v2\/tags?post=16137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}