在 react.js 中传递属性/添加到收藏夹

Question

I have a mapped accordion of items, that each have a Favourite -icon. Upon clicking that icon it needs to change color (already does that) and pass the {name.toUpperCase()} property of the BadgeButton to to the Favourites -page. Can someone explain/show me how? Any help would be much appreciated.

This is the Accordion -page:

export default function Accordion({ name, description, use, recipe, liked }) {
  const [clicked, setClicked] = useState(false);

  function handleClick() {
    setClicked(!clicked);
  }

  return (
    <AccordionDiv>
      <AccordionHead onClick={handleClick}>
        <div>
          <BadgeButton>{name.toUpperCase()}</BadgeButton>
          <StyledArrow clicked={clicked} />
        </div>
        <div>{use}</div>
      </AccordionHead>
      <AccordionContent clicked={clicked}>
        <span>{description}</span>
        <p>{recipe}</p>
        <StyledIcons>
          <Favourite liked={liked} />
          <Vote />
        </StyledIcons>
      </AccordionContent>
    </AccordionDiv>
  );
}

Favourites -page:

export default function Favourites() {
  return (
    <WrapperDiv>
      <Header />
      <Title headline>FAVOURITES</Title>
      <BadgeButtonClose>{}</BadgeButtonClose>
    </WrapperDiv>
  );
}

Answer 1

You would have to set the name in state and pass it as a prop to Favourites. somethiing like this:

const [nameClicked, setNameClicked] = useState("");

function handleClick() {
    setClicked(!clicked);
    setNameClicked(name);
}

<AccordionDiv>
    ...
    <Favourite liked={liked} name={nameClicked} />
</AccordionDiv>