How to properly render a success message upon clipboard click and copy

Question

I'm creating a color palette where I have a clipboard icon within a Tooltip component next to each color. On click it will copy the color's name onto the user's clipboard. When that happens, the Tooltip's message should change from "copy" to "copy success". I'm having issues trying to display the success message individually for each color.

Answer 1

All of you Tooltip components are using the same parent state this.state.copyMessage. If you click copy on one, that sets this.state.copyMessage to "copy success", and it gets rerendered for all other Tooltips. You need to be able to either:

1. identify who was clicked,
2. give state to each Tooltip,
3. add one state entry per tooltip.

I'd personally go with a way to identify who was clicked.

Global declaration

const PROMPT_MESSAGE = "Copy to clipboard"
const CLICKED_MESSAGE = "Copied!"

Set your state onClick

setState({ clickedColor: color.name });

Get the appropriate message for the specific color

const tooltipTitle = this.state.clickedColor === color.name
  ? CLICKED_MESSAGE
  : PROMPT_MESSAGE

Pass in the title

<Tooltip title={tooltipTitle} placement="right">
</Tooltip>

There are many ways to work around this, and this is just one I find readable!

Answer 2

Try passing 'event' as a parameter to your onClick function and using the stopPropagation() method. Like so:

<Tooltip title={copyMessage} placement="right">
      <span
        onClick={(event) => {
          event.stopPropagation()
          copyNameToClipboard(color.name);
          setState({
            copyMessage: 'copy success',   
          });
        }}
      >

This should stop your event from 'bubbling up' to other components:

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation