在反应中单击按钮时过滤 json 数据

Question

i have a json file as a server, i need filter the data json when i click in a button, example, in the Navbar i have:

const NavBar = ({setSearchValue, setType}) => {
  const handleType = (heroType) =>{
    setType(heroType)
    }

  return (
// this input is ok, i can search data from here
              <input id='searchInput' placeholder='Search' onChange={(event) => {setSearchValue(event.target.value)}}/>
//these are the buttons
            <Nav.Link onClick={() => handleType('All')}>All Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flying')} >Flying Heroes</Nav.Link>
            <Nav.Link onClick={() => handleType('Flightless')}>Flightless Heroes</Nav.Link>

and this is where i need to show it

  //import Navbar
        import NavBar from "./NavBar";
        
        const Home = () => {
    // saved the data i need to show 
          const [content, setContent] = useState();
    // saved the searchvalue of navbar, its ok.
          const [searchValue, setSearchValue] = useState("");
    // i tried save the button data here, next with a IF function i tried to show it, no work
          const [type, setType] = useState("Flying");
        
          useEffect(() => {
// get json dta
            const getData = async () => {
              const response = await db.get("data");
        
              let data = response.data.filter((val) => {
// if no searchValue, return all
                if (searchValue === "") return val;
//if searchVale, return coincidences
                else if (val.nombre.toLowerCase().includes(searchValue.toLowerCase()))
                  return val;
              });
        // returns bootstrap rows depending on number of elements
              const rows = [...Array(Math.ceil(data.length / 3))];
              const imagesRows = rows.map((row, idx) =>
                data.slice(idx * 3, idx * 3 + 3)
              );
        //saved all in setContent
              setContent(
                //code
                )
            getData();
          }, [searchValue]);
        
          return (
            <>

              <NavBar setSearchValue={setSearchValue} setType={setType} />
//show content
              <Container>{content >= 0 ? <p>No results</p> : content}</Container>
            </>
          );
        };

I've tried a lot of things, i think i need change a lot of code ia want this work. Any help would be extremely appreciated.

EDIT Json:

        {
          "data": [
            {
              "id": 0,
              "nombre": "Punisher",
              "puedeVolar": false,
              "nombreReal": "Frank Castle",
              "avatarURL": ""
            },
            {
              "id": 1,
              "nombre": "Green Arrow",
              "puedeVolar": false,
              "nombreReal": "Oliver Jonas Queen",
              "avatarURL": ""
            },
            {
              "id": 2,
              "nombre": "Human Torch",
              "puedeVolar": true,
              "nombreReal": "Jonathan Lowell Spencer",
              "avatarURL": ""
            },
            {
              "id": 3,
              "nombre": "Martian Manhunter",
              "puedeVolar": true,
              "nombreReal": "J'onn J'onzz",
              "avatarURL": ""
            },
            {
              "id": 4,
              "nombre": "Aquaman",
              "puedeVolar": false,
              "nombreReal": "Arthur Curry",
              "avatarURL": ""
            }
}

So when clicked button display heroes.puedeVolar === false or display heroes.puedeVolar === true, depending of the button clicked

Answer 1

Post your JSON to help you. You're lifting up correctly the states, you just need to do the same that you did with the input. Put the type as a dependecie of useEffect and inside it filter your JSON with your type value.

 useEffect(()=>{ //... Keep your working code let data = response.data.filter((val) => { //Keep your working code or refactor it //Add you new filter params if (val.type === type) return val; } }, [type, searchValue]);