Storybook error with rc tooltip component: React.Children.only expected to receive a single React element child

Question

My code for the tooltip is as simple as so:

const DefaultTooltip = (props: BaseTooltipProps) => {
  const {
    placement = "bottomRight",
    header,
    body,
    trigger = "hover",
    destroyTooltipOnHide = true,
    mouseLeaveDelay = 0,
  } = props;

  const overlay = header ? (
    <span>
      {header}
      {body}
    </span>
  ) : (
    <>
      <div>body</div>
    </>
  );

  return (
    <StyledTooltip
      placement={placement}
      overlay={overlay}
      trigger={trigger}
      destroyTooltipOnHide={destroyTooltipOnHide}
      mouseLeaveDelay={mouseLeaveDelay}
    />
  );
};

export default DefaultTooltip;

And in storybook, I'm trying to get it to display like so:

export const TooltipStory: Story = () => {
  return (
    <div>
      TEST TEST TEST
      <Tooltip
        placement={"bottomRight"}
        header={"test test test"}
        body={"ok ok ok"}
        trigger={"hover"}
        destroyTooltipOnHide={true}
        mouseLeaveDelay={0}
      />
    </div>
  );
};

But as noted, I get that pesky error saying only a single child was expected. I have my tooltip wrapped in a div, and that's it.. the tooltip has one child component itself but I did not think that would matter. Any other ideas here? I'm using the rc-tooltip library by the way.

Answer 1

It seems a single child node is required. I don't see where any children are passed to the ToolTip and, ultimately, the StyledTooltip component.

const DefaultTooltip = (props: BaseTooltipProps) => {
  const {
    children,
    placement = "bottomRight",
    header,
    body,
    trigger = "hover",
    destroyTooltipOnHide = true,
    mouseLeaveDelay = 0,
  } = props;

  const overlay = header ? (
    <span>
      {header}
      {body}
    </span>
  ) : (
    <div>body</div>
  );

  return (
    <StyledTooltip
      placement={placement}
      overlay={overlay}
      trigger={trigger}
      destroyTooltipOnHide={destroyTooltipOnHide}
      mouseLeaveDelay={mouseLeaveDelay}
    >
      {children}
    </StyledTooltip>
  );
};

...

export const TooltipStory: Story = () => {
  return (
    <Tooltip
      placement={"bottomRight"}
      header={"test test test"}
      body={"ok ok ok"}
      trigger={"hover"}
      destroyTooltipOnHide={true}
      mouseLeaveDelay={0}
    >
      <div>
        TEST TEST TEST
      </div>
    </Tooltip>
  );
};