{"record":{"id":"25c480e7b31b6043","repo":"mantinedev/mantine","slug":"hovercard-target-component-children-should-be-an-e","errorCode":null,"errorMessage":"HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"HoverCard\\.Target component children should be an element or a component that accepts ref\\. Fragments, strings, numbers and other primitive values are not supported","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx","lineNumber":31,"sourceCode":"   * @default undefined (event listeners passed directly to component)\n   */\n  eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n  const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n    'HoverCardTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useHoverCardContext();\n  const groupContext = use(HoverCardGroupContext);\n  const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);\n\n  if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {\n    const referenceProps = ctx.getReferenceProps();\n\n    return (\n      <Popover.Target refProp={refProp} {...others}>\n        {cloneElement(\n          child,\n          eventPropsWrapperName\n            ? { [eventPropsWrapperName]: { ...referenceProps, ref: ctx.reference } }\n            : { ...referenceProps, ref: ctx.reference }","sourceCodeStart":13,"sourceCodeEnd":49,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx#L13-L49","documentation":"HoverCard.Target must attach hover event listeners and a positioning ref to its single child. getSingleElementChild returns null when the child is a fragment, primitive, or missing, so there is no DOM node to listen on and the component throws during render.","triggerScenarios":"Child of HoverCard.Target is a string, number, fragment, multiple elements, or a component that doesn't forward refs.","commonSituations":"Wrapping a plain text label instead of a button/link, using a styled icon component that lacks ref forwarding, or conditional rendering that occasionally yields no element.","solutions":["Wrap the hover trigger in a real element (button, span, a)","Forward refs from custom trigger components","Ensure exactly one child element is always rendered"],"exampleFix":"// before\n<HoverCard.Target>Hover me</HoverCard.Target>\n\n// after\n<HoverCard.Target><Button>Hover me</Button></HoverCard.Target>","handlingStrategy":"type-guard","validationCode":"// Wrap the hover trigger text in an element before passing to HoverCard.Target","typeGuard":"const isValidHoverTarget = (children: React.ReactNode): boolean => isElement(children);","tryCatchPattern":null,"preventionTips":["Use Button/Anchor/span as the trigger","Forward refs from custom triggers","Never render HoverCard.Target empty"],"tags":["mantine","react","children-validation","ref","hover-card"],"backgroundTag":"react-child-must-forward-ref","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}