NOTE: My Page Card component is working correctly. How can I filter the card page component in the Search component?

I'm new to react, and I don't quite understand how I can accomplish this task.

In the Search component I put it in a fixed way, as I can't filter a component using another.

The Code is summarized for ease.

Card Page

import React, {
  useEffect,
  useState
} from "react";
import classes from "./boxService.module.css";
import axios from "axios";


function BoxService() {
  const [test, SetTest] = useState([]);
  useEffect(() => {
    axios
      .get("http://localhost:8080/api/test")
      .then((response) => {
        SetTest(response.data);
      })
      .catch(() => {
        console.log("Error!");
      });
  }, []);


  return ({
        test.map((test, key) => { 
           <div className={classes.box}

            return ( 
            <Grid item xs = {2} key={key} >
              <div className={test.name} < div >
              <p className={test.description}</p>
            </Grid>
            );
          })}
        );
      }

export default BoxService;

Seach Page

import React, {
    useState,
    useEffect
} from "react";
import axios from "axios";

function Search() {
    const [searchTerm, setSearchTerm] = useState("");
    const [test, SetTest] = useState([]);

    //Chamada API
    useEffect(() => {
        axios
            .get("http://localhost:8080/api/test")
            .then((response) => {
                SetTest(response.data);
            })
            .catch(() => {
                console.log("Error");
            });
    }, []);

    return (
        <div>
        <input type = "text"
        placeholder = "Search..."
        onChange = {
            (event) => {
                setSearchTerm(event.target.value);
            }
        }/>
        {
            test.filter((val) => {
                    if (searchTerm === "") {
                        return val;
                    } else if (
                        val.nome.toLowerCase().includes(searchTerm.toLowerCase())
                    ) {return val;}
                }).map((val, key) => {
                    return ( <div className = "user"
                        key = {key} >
                        <p> {val.name} </p> </div>
                    );
                })
        } </div>
    );
}

export default Search;

CodePudding user response：

Here is an example of how it should/could look like:

import React from "react";

function SearchBox({ setSearchTerm, searchTerm }) {
  const handleFilter = (e) => {
    setSearchTerm(e.target.value);
  };
  return (
    <>
      filter
      <input type="search" onChange={handleFilter} value={searchTerm} />
    </>
  );
}

export default function App() {
  const [searchTerm, setSearchTerm] = React.useState("");
  const [filteredResults, setFilteredResults] = React.useState([]);
  const [results, setResults] = React.useState([]);

  React.useEffect(() => {
    const fetchdata = async () => {
      const randomList = await fetch(`https://randomuser.me/api/?results=50`);
      const data = await randomList.json();

      const { results } = data;

      setResults(results);
    };
    fetchdata();
  }, []);

  React.useEffect(() => {
    const filterResults = results.filter((item) =>
      item.name.last.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredResults(filterResults);
  }, [searchTerm, results]);

  return (
    <div className="App">
      <SearchBox setSearchTerm={setSearchTerm} searchTerm={searchTerm} />
      <div>
        <ul>
          {filteredResults.map(({ name }, idx) => {
            return (
              <li key={idx}>
                {name.first} {name.last}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}