SolidJS•2mo ago

Dynamic Component & Props

I'm having a hard time making use of the <Dynamic/> component and passing props to the underlying component. This is the dynamic component: Here, it should pass to the underlying component the id and onClick properties

export function CollapsibleControl(props: CollapsibleControlProps) {
    const [prop, others] = splitProps(props, ['as', 'onClick']);
    const ctx = useCollapsible();
    console.log(prop.onClick);
    console.log(prop.as);
    return (
        <Dynamic
                        {...others}
            component={prop.as}
            id={'collapsible-control'.concat(ctx.id)}
            onClick={(e: MouseEvent) => {
                console.log('is being clicked?');
                prop.onClick?.(e);
                ctx.toggle();
            }}
        />
    );
}

export function CollapsibleControl(props: CollapsibleControlProps) {
    const [prop, others] = splitProps(props, ['as', 'onClick']);
    const ctx = useCollapsible();
    console.log(prop.onClick);
    console.log(prop.as);
    return (
        <Dynamic
                        {...others}
            component={prop.as}
            id={'collapsible-control'.concat(ctx.id)}
            onClick={(e: MouseEvent) => {
                console.log('is being clicked?');
                prop.onClick?.(e);
                ctx.toggle();
            }}
        />
    );
}

I'm using it like this:

const TableFilterButton = () => (
    <Button
        color='outline'
        size='sqr_md'
    >
        <Show when={numFilters() > 0}>
                <span
                    class={
                        'bg-orange-600 text-white rounded-full w-4 h-4 p-2.5 text-xs leading-none inline-flex justify-center items-center me-2'
                    }
                >
                    {numFilters()}
                </span>
        </Show>
        <span class='hidden md:block'>Filtrar por</span>
        <ConfigIcon className='w-5 h-5 md:ms-2 text-gray-600' />
    </Button>
);
    
<CollapsibleControl onClick={handleFilterByPress} as={TableFilterButton} />

const TableFilterButton = () => (
    <Button
        color='outline'
        size='sqr_md'
    >
        <Show when={numFilters() > 0}>
                <span
                    class={
                        'bg-orange-600 text-white rounded-full w-4 h-4 p-2.5 text-xs leading-none inline-flex justify-center items-center me-2'
                    }
                >
                    {numFilters()}
                </span>
        </Show>
        <span class='hidden md:block'>Filtrar por</span>
        <ConfigIcon className='w-5 h-5 md:ms-2 text-gray-600' />
    </Button>
);
    
<CollapsibleControl onClick={handleFilterByPress} as={TableFilterButton} />

But upon usage and further inspection, it does not pass the properties, no sure why, as documentation shows this example for this: <Dynamic component={someComponent} someProp="someValue" />. Any idea of how to make this work?

7 Replies

Jasmin•2mo ago

Where do you want these props to be used?

mrViniciusOP•2mo ago

By the button component

Jasmin•2mo ago

should they be on the <Button> component in TableFilterButton? you have to accept the props and pass them to the component:

const TableFilterButton = (props) => (
    <Button
        color='outline'
        size='sqr_md'
        {...props}
    >

const TableFilterButton = (props) => (
    <Button
        color='outline'
        size='sqr_md'
        {...props}
    >

the Dynamic component passes them to TableFilterButton, but you're not using them

mrViniciusOP•2mo ago

oh, what a silly mistake it worked!

Jasmin•2mo ago

nice! :zzz_flushedfroge:

mrViniciusOP•2mo ago

thanks

Jasmin•2mo ago

happy to help

Gaming

Programming

Dynamic Component & Props