react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

How to implement async getContent?

Open sabetAI opened this issue 3 years ago • 1 comments

I'm trying to include async function calls inside the getContent method for a tooltip as follows:

 <>
      <img
        data-tip=""
        data-for={name}
        data-event="click"
        className="history-button"
        src={isLight ? historyLight : historyDark}
      />
      <ReactTooltip
        className="tool-tip"
        id={name}
        type="dark"
        effect="solid"
        place="top"
        globalEventOff="click"
        getContent={async () => {
          const docRef = doc(db, `completion-history`);
          const snap = await getDoc(docRef);
          return helper;
        }}
        clickable
      />
    </>

but get the following error: Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

What's the proper way to implement a tooltip with async content?

sabetAI avatar Dec 14 '21 01:12 sabetAI

@sabetAI did you solve this? I'm having the same requirement.

rbluethl avatar May 23 '22 07:05 rbluethl