Antd Popover and Tooltip state synchronisation between each other. Do not show Tooltip when Popover is active

Question

What needs to be achieved

A unique content Popover needs to be shown for each cell with button. Tooltip needs to be visible on hover, and only when there is no opened Popover.

The problem description

State overlapping happens when there is a next button click happens right after clicking on first button and vice versa. In another words, "Hover for Tooltip" should not be visible when I click 'Test 2' right after clicking 'Test 1'

2nd component new state comes before older component state becomes falsy

CodeSandbox Link

Tried to move the state outside and loop through all the cells to find if any of these cells has 'opened' Popover.

Answer 1

You need to change this part of the code in your sandbox to not display the text "Hover for Tooltip"

Initial code in your sandbox

  const [arePopoversOpen, setPopoversOpen] = useState(false);

  const handlePopoverOpen = (newIsOpen) => {
    setPopoversOpen(newIsOpen);
  };

Changes to be done

  const [arePopoversOpen, setPopoversOpen] = useState(false);

  const handlePopoverOpen = () => {
    setPopoversOpen(!arePopoversOpen);
  };