Passing props from parent to children (React.cloneElement replacement)
Hi team,
I’d be grateful for your help.
I have a wrapper component that should play a sound on mouseenter for various JSX elements. To achieve this, I pass an enhanced onMouseEnter handler to each child. I need to use a wrapper rather than adding local logic to each component, since I’ll apply this functionality throughout the app to different types of JSX elements and components.
In React, I implemented it like this:
React.Children.map<ReactNode, ReactNode>(children, (child) => {
if (!React.isValidElement(child)) return null;
return React.cloneElement(
child as ReactElement<PropsWithChildren<InteractiveElementProps>>,
{
onMouseEnter: () => {
child.props.onMouseEnter?.();
produceSound();
},
}
);
});
I’m now migrating to Solid, but I’m not sure how to replicate this behavior. I’ve seen the Dynamic component, but it expects a component rather than a JSXElement. Here’s a simplified (non-working) example:
https://playground.solidjs.com/anonymous/d694e383-beb9-4475-a960-c0ab7238a0f0
Thank you in advance for your time and help!
I’d be grateful for your help.
I have a wrapper component that should play a sound on mouseenter for various JSX elements. To achieve this, I pass an enhanced onMouseEnter handler to each child. I need to use a wrapper rather than adding local logic to each component, since I’ll apply this functionality throughout the app to different types of JSX elements and components.
In React, I implemented it like this:
React.Children.map<ReactNode, ReactNode>(children, (child) => {
if (!React.isValidElement(child)) return null;
return React.cloneElement(
child as ReactElement<PropsWithChildren<InteractiveElementProps>>,
{
onMouseEnter: () => {
child.props.onMouseEnter?.();
produceSound();
},
}
);
});
I’m now migrating to Solid, but I’m not sure how to replicate this behavior. I’ve seen the Dynamic component, but it expects a component rather than a JSXElement. Here’s a simplified (non-working) example:
https://playground.solidjs.com/anonymous/d694e383-beb9-4475-a960-c0ab7238a0f0
Thank you in advance for your time and help!
Quickly discover what the solid compiler will generate from your JSX template
