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();
            }}
        />
    );
}

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} />

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" />

<Dynamic component={someComponent} someProp="someValue" />

<Dynamic component={someComponent} someProp="someValue" />

<Dynamic component={someComponent} someProp="someValue" />.

Any idea of how to make this work?

Dynamic Component & Props

Similar Threads

Similar Threads

Similar Threads