Filter and Search list of objects example in React

Author: time-to-program

public/index.html

@@ -15,6 +15,13 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -1,23 +1,81 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
 
 function App() {
+  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("");
+
+  //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)
+  };
+
+  //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)
+  }
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <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>
   );
 }

src/App.js

@@ -1,13 +1,79 @@
-body {
+* {
+  font-family: "Poppins", sans-serif;
+  padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f0f1f3;
+}
+
+h2 {
+  color: #737373;
+  margin-top: 120px;
+  margin-bottom: 25px;
+}
+
+.list-wrapper {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.filter-container {
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+input[type="text"],
+select {
+  border-radius: 6px;
+  padding: 8px 15px;
+  border-width: 0px;
+}
+
+input[type="text"]:focus,
+select:focus {
+  outline: none;
+}
+
+.card {
+  width: 150px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 10px 25px;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.num-text {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #c3c3c3;
+}
+
+.title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #343434;
+  margin-left: 0.5rem;
+}
+
+.description {
+  font-size: 0.8rem;
+  color: #343434;
+  margin-left: 0.5rem;
 }