export const PopOver = ({
children, -----------------------------------------> I get children
headerText,
bodyText,
hasHeader,
hasBody,
hasFooter,
cancelButtonText,
okButtonText,
hasCloseButton,
onOkPress,
onCancelPress,
...rest
}: PopoverProps): JSX.Element => {
return (
<Popover
trigger={(triggerProps) => {
return <Button {...triggerProps}>Trigger</Button>; //How do I pass trigger props to the children I get???
}}
{...rest}
>
In the code I have mentioned above, I want to return children (this.props.children) instead of the button to make it more generic. something to the equivalent of:
return (
<Popover
trigger={(triggerProps) => {
return <child {...triggerProps}>Trigger</child>;
}}
{...rest}
>
Try this:
<Popover
trigger={triggerProps =>
React.Children.map(children, child =>
React.isValidElement(child)
? React.cloneElement(child, { ...triggerProps })
: child
)
}
{...rest}
/>
References: