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!
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
2 Replies
Dynamic is used to pass down props to component or as a shortcut for document.createElement(tag).
In React you are passing down objects representing the "to be created element" so you can intercept it and modify it before it gets to vdom.
In Solid you are directly passing down elements or functions that return elements. So when you resolve the children you directly have dom elements. They are already created just not attached to dom so we can modify them in vanilla js manner. https://playground.solidjs.com/anonymous/2970fc8c-f56e-494b-ae0c-d971fe8696ea
onMouseEnter isn't delegated event so there is no performance to be saved either
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
@Dakotys Oh, I get it now 😯 that makes perfect sense, thanks.