Filtering Data to load a particular response on click

Question

Currently I have a component that is loaded when I call my API. This content has a CitizenshipType field that separates the items from each other. I have 2 buttons on top which I want to use to filter my data. 1 button is called Europe which should bring out all the content where CitizenshipType=Europe, etc. Currently I have all my data showing without any filtering. Here is my code:

Citizenship Page:

export default function Citizenship({ items, citi }) {
  return (
    <>
      <div>
        <div onClick=//SomeFunction>
          CARRIBEAN
        </div>
        <div onClick=//SomeFunction>
          EUROPE
        </div>
      </div>
      <div>
        <div onClick=//SomeFunction>
          OTHER PROGRAMS
        </div>
      </div>

  <div>
    {items &&
      items.map((item) => (
        <div style={{ padding: "40px" }}>
          <div class="citizen-item" key={item.id}>
            <div className="container6">
              <img
                src={`http://localhost:1337${item.Thumbnail.url}`}
              />
              <div>
                {item.Title}
              </div>
              <div>
                Access to {item.CountriesAccessible} countries
              </div>
              <div>
                <button class="findButton">FIND OUT MORE</button>
              </div>
            </div>
          </div>
        </div>
      ))}

    {citi &&
      citi.map((test) => (
        <div style={{ padding: "40px" }}>
          <div class="citizen-item" key={test.id}>
            <div className="container6">
              <img
                src={`http://localhost:1337${test.Thumbnail.url}`}
              />
              <div>
                {test.Title}
              </div>
              <div>
                Access to {test.CountriesAccessible} countries
              </div>
              <div>
                <button class="findButton">FIND OUT MORE</button>
              </div>
            </div>
          </div>
        </div>
      ))}  
</> 

);
}

Home Page where I am calling the APIs:

export default function Home({ items, citi }) {
  return (
    <div>
      <Benefits />
      <Citizenship items={items} citi={citi} />
      <Video />
    </div>
  );
}

export async function getStaticProps() {
  const CitizenshipEUres = await fetch(
    "http://localhost:1337/citizenships?_limit=5&CitizenshipType=Europe"
  );
  const CitizenshipCAres = await fetch(
    "http://localhost:1337/citizenships?_limit=5&CitizenshipType=Caribbien"
  );

  const items = await CitizenshipEUres.json();
  const citi = await CitizenshipCAres.json();

  return {
    props: { items, citi },
  };
}

Answer 1

you toggle them with states:

import React, { useState } from 'react'

export const TestComponent = () => {

  const [carribeanIsShowing, setShowCarribean] = useState(false)
  const [europeIsShowing, setShowEurope] = useState(false)

  const toggleCarribean = () => {
    if (!carribeanIsShowing) {
      if(europeIsShowing) {
        setShowEurope(false)
      }
      setShowCarribean(!carribeanIsShowing)
    } else {
      return
    }
  }

  const toggleEurope = () => {
    if (!europeIsShowing) {
      if(carribeanIsShowing) {
        setShowCarribean(false)
      }
      setShowEurope(!europeIsShowing)
    } else {
      return
    }
  }

  return (
    <div>
      <button onClick={() => toggleCarribean()}>
        CARRIBEAN
      </button>
      <button onClick={() => toggleEurope()}>
        EUROPE
      </button>
      {europeIsShowing && <div>Europe</div>}

      {carribeanIsShowing && <div>carribean</div>}
    </div>
  )
}

Answer 2

Create a new variable where you store the current CitizenshipType, with a default value of 'Europe'.

const [currentCitizenshipType, setCurrentCitizenshipType] = useState(
    "Europe"
);

You change your onClick event

<div onClick={() => setCurrentCitizenshipType('Europe')}>
     EUROPE
</div>

And finally add a filter statment to your items.map call:

{
items
.filter((item) => item.citizenshipType === currentCitizenshipType)
.map((item)

...}