Home » How to Search Filter Array of Objects in React JS

How to Search Filter Array of Objects in React JS

react search filter array of objects

In this blog post, we will learn how to search and filter an array of objects in React JS with an example. 

In this example, we will display a list that contains the planet details like name and size. we will implement search functionality to search through the array of objects using planet names. And we will also filter the list of objects with planet size.

Steps to Search and Filter Array of Objects in React JS

  • Creating an array of objects and declaring state variables
  • Creating UI
  • Search through the array of objects
  • Implementing array filter

Creating an array of objects and declaring state variables

Let’s first declare our array of objects, we have defined a constant named ‘planetList’ that contains the list of planet details like name, size, and unit.

const planetList = [
  { id: "01", name: "Mercury", size: "2440", unit: "km" },
  { id: "02", name: "Venus", size: "6052", unit: "km" },
  { id: "03", name: "Earth", size: "6371", unit: "km" },
  { id: "04", name: "Mars", size: "3390", unit: "km" },
  { id: "05", name: "Jupiter", size: "69911", unit: "km" },
  { id: "06", name: "Saturn", size: "58232", unit: "km" },
  { id: "07", name: "Uranus", size: "25362", unit: "km" },
  { id: "08", name: "Neptune", size: "24622", unit: "km" },
];
 
const [filteredList, setFilteredList] = useState(planetList);
const [searchQuery, setSearchQuery] = useState("");

We also declare some useState variables ‘filteredList’ and ‘searchQuery’ to store our list items and user-entered search queries.

Creating UI

Now we have our list of items and state variables declared. Let’s create the UI for this example. Here is the JSX code for our UI.

<div className="container">
  <h2>Search Filter Array of Objects</h2>
 
  <div className="list-wrapper">
    <div className="filter-container">
      <input
        type="text"
        name="search"
        placeholder="Search"
        value={searchQuery}
        onChange={handleSearch}
      />
      <div>
        <select name="size" onChange={onFilterChange}>
          <option value="">Filter by Size</option>
          <option value="2000">Greater Than 2000km</option>
          <option value="6000">Greater Than 6000km</option>
          <option value="10000">Greater Than 10000km</option>
          <option value="25000">Greater Than 25000km</option>
        </select>
      </div>
    </div>
 
    {filteredList.map((item, index) => {
      return (
        <div className="card" key={index}>
          <p className="num-text">{item.id}</p>
          <div>
            <p className="title">{item.name}</p>
            <p className="description">
              {item.size} {item.unit}
            </p>
          </div>
        </div>
      );
    })}
  </div>
</div>;

In the above JSX code, we have an input element for entering the search query and a dropdown that we use to filter the list data by size.

And to render our list of objects, we are using the map() method to display the list.

Also check out:

Now our UI will look like this.

search filter array of objects in react

Search through the array of objects

To implement the search, we have written the ‘handleSearch’ function that will be triggered whenever the user types something into the search input box.

//Search list of objects
const handleSearch = (event) => {
  const query = event.target.value;
  setSearchQuery(query);
 
  const searchList = planetList.filter((item) => {
    return item.name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  });
 
  setFilteredList(searchList);
};

Inside the ‘handleSearch’ function, we are first getting the search query that the user typed into the input box and setting it to the ‘searchQuery’ state variable. Then we are using the filter() method on the ‘planetList’ array. 

Inside filter() we have used the indexOf() method to check whether the user-entered search phrase is part of the ‘name’ property in the object.

Now the filter() method will return a new array with all the items which contain the search query. We will set this new array to the ‘filteredList’ state variable.

Output:

search array of objects react js

Implementing array filter

We will filter our list of objects based on the planet’s size. We have a dropdown menu that contains different sizes. When the user selects a size we will filter the planet list and display all planet items whose size is greater than the user-selected size.

//Filter List of object
const onFilterChange = (event) => {
  const selectedSize = Number(event.target.value);
 
  const filterList = planetList.filter((item) => {
    return Number(item.size) > selectedSize;
  });
 
  setFilteredList(filterList);
};

The ‘onFilterChange()’ function will be triggered when the user selects an option from the dropdown menu.

Inside the ‘onFilterChange()’ function, we are getting the user-selected option value and we are filtering the list of objects using the javascript filter() method. And we are assigning the filtered list to the ‘filteredList’ state variable.

Output:

filter array of objects react js

That’s it, this was a simple example to search filter an array of objects in react js. Hope this was helpful.

Leave a Reply

Your email address will not be published.