How to rerender a component from another component-CodePudding

export default function Filters() {
  const [data, setData] = useState(Data.items)

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

    setData(newData)
  }

  return (
        <Container>
          <PageWrapper>
            <FilterGrid>
              <FilterBlock>
                  <Text grey filterTitle>Cena za den</Text>
                <FlexRow>
                  <input type="text" />
                  <input type="text" />
                </FlexRow>
              </FilterBlock>
              <FilterBlock>
                  <Text grey filterTitle>Typ karavanu</Text>
                  <FlexRow>
                      <CarType filter={() => filterItem("Alcove")} 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é." />
                  </FlexRow>
              </FilterBlock>
            </FilterGrid>
          </PageWrapper>
        </Container>
  )
}

Given two components, I want to re-render component B (CarCard), which is displayed on the Home page after firing a function in component A (Filters). For example, I click the button and then it displays new data.

const Home = () => {
  return (
      <>
        <Head>
          <title>Campiri - Zadání</title>
        </Head>
        <PageWrapper>
          <Header />
        </PageWrapper>
        <Filters />
        <PageWrapper>
          <CarCard data={data} />
        </PageWrapper>
      </>
  )
}

CodePudding user response：

Actually, when Filter update data, is just the state, so CarCard don't know that something change. You need put the dataState and the setfunction on Home component and provide the setfucntion callback and dataState to your Filter component and provide the dataState to CarCard.

const Home = () => {
    const [data, setData] = React.useState(Data.something);

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

    return (
        <>   
            <Filters callbackFc={filterItem} data={data} />
            <CarCard data={data} />
        </>
    )
}

And now your both Child component are render when you do any action on Filter.