original code https://www.freecodecamp.org/news/build-a-search-filter-using-react-and-react-hooks/

gistfile1.txt

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Card, Input } from "semantic-ui-react";
export default function Posts() {
  const [APIData, setAPIData] = useState([]);
  console.log(APIData);
  const [searchInput, setSearchInput] = useState("");
  useEffect(() => {
    axios.get(`https://jsonplaceholder.typicode.com/users`).then((response) => {
      setAPIData(response.data);
    });
  }, []);

  const filteredData = APIData.filter(
    (obj) =>
      obj.name.toLowerCase().includes(searchInput.toLocaleLowerCase()) ||
      obj.email.toLowerCase().includes(searchInput.toLocaleLowerCase())
  );

  return (
    <div style={{ padding: 20 }}>
      <Input
        icon="search"
        placeholder="Search..."
        onChange={(e) => setSearchInput(e.target.value)}
        value={searchInput}
      />
      <Card.Group itemsPerRow={3} style={{ marginTop: "20px" }}>
        {filteredData.map((item) => {
          return (
            <Card style={{ marginTop: "20px" }}>
              <Card.Content>
                <Card.Header>{item.name}</Card.Header>
                <Card.Description>{item.email}</Card.Description>
              </Card.Content>
            </Card>
          );
        })}
      </Card.Group>
    </div>
  );
}