Victoria
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!
3 replies
Review Show wrapper for multiple signals in TypeScript
Hello!
I need your help reviewing a solution I created. I initially encountered a problem when using Solid + TypeScript to conditionally render multiple signals. I want to pass several signals to a Show component that may contain undefined values and, within the children function, access all the passed signals separately.
https://playground.solidjs.com/anonymous/cd0b9dce-db4a-400f-88b9-8a23ea88e05e
Here is an example of the Show wrapper I created. It works as expected, but I’d appreciate your help identifying any potential pitfalls or edge cases. Thanks for your help!
6 replies