'How to pass components value into a function in an another component

Given two components, I need to pass in a parameter to a function in component A (Home) from component B (Filters)

export default function Filters({filter}) {
  return (
      <>
        <CarType filter={() => filter()} type="Campervan" desc="Obytka s rozměry osobáku, se kterou dojedete všude." />
        <CarType type="Integrál" desc="Král mezi karavany. Luxus na kolech." />   
        <CarType type="Vestavba" desc="Celý byt geniálně poskládaný do dodávky." />
        <CarType type="Přívěs" desc="Tažný karavan za vaše auto. Od kapkovitých až po rodinné." />
      </>
  )
}

const Home = () => {
  const [data, setData] = useState(Data.items)

  const filterItem = (type) => {
    const newData = Data.items.filter((newItem) => {
      return newItem.vehicleType === type
    })
    setData(newData)
  }

  return (
      <>
        <Filters filter={() => filterItem()}/>
      </>
  )
}

I need to pass in a different parameter, depending on the CarType (button) I click.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source