How can I change the text of a button based on click if is looped inside a map function?

Question

I am mapping over a series of cards in a form component like this :

```

{links?.map((i,j) => (
  <main className={styles["card-container"]} key={j}>
    <Card
        url={i?.url}
        shortenUrl={i?.shorten}
    />
  </main>
))}

```

That Card renders a URL link, a shortened link and a button that says "click"

<div>
  <div>{url}</div>
  <div>{shortenUrl}</div>
  <Button>Copy</Button>

</div>

The Button too is a reusable component,

  return (
    <>
      <button>{children}</button>
    </>
  )

What I want to do:

• I want to click the button on any of the mapped cards, and the button text should be changed to "copied"

what I have tried :

• I have tried using a state to change the text, but it changes "copy" -> "copied" on all the mapped cards.
• I also tried passing props from the form component using prop drilling to the Button component, but it doesn't work as expected.
• I looked at other answers here on SO, one answer was to use button text as an array itself, but I'm not sure how to implement it in this context.

Any solution to this?

Thanks for reading this far

Answer 1

Add local state to each Card component, create a local click handler that toggles the state and calls any passed onClick handlers.

Example:

const [copy, setCopy] = useState();

const clickHandler = (e) => {
  setCopy(copy => !copy);
  // call any external click handler, pass onClick event object, etc...
};

<div>
  <div>{url}</div>
  <div>{shortenUrl}</div>
  <Button onClick={clickHandler}>
    {copy ? "Copied" : "Copy"}
  </Button>
</div>

Update

If you want only a single selected button at-a-time, then lift the state to the parent component render the Card components and pass as props the currently selected card and a callback to toggle the selected card.

Example:

const [selected, setSelected] = React.useState(null);

const toggleSelected = index => {
  // toggle null if deselecting current selected,
  // otherwise set selected as new index
  setSelected(selected => selected === index ? null : index);
};

...

{links?.map((i, index) => (
  <main className={styles["card-container"]} key={index}>
    <Card
      url={i?.url}
      shortenUrl={i?.shorten}
      selected={selected === index}
      onClick={() => toggleSelected(index)}
    />
  </main>
))}

...

const Card = ({ url, shortenUrl, selected, onClick }) => {
  ...

  return (
    ...

    <div>
      <div>{url}</div>
      <div>{shortenUrl}</div>
      <Button onClick={onClick}>
        {selected ? "Copied" : "Copy"}
      </Button>
    </div>

    ...
  );
};