mrVinicius Posts - Answer Overflow

mrVinicius

•Created by mrVinicius on 11/28/2024 in #support

Hydration error when using <Show>

Why <Show/> is giving me a hydration error here? i genuinely don't understand why. https://github.com/mrVinxyz/sldify/blob/tmp-docs/docs/src/components/api-reference.tsx

14 replies

SSolidJS

•Created by mrVinicius on 10/24/2024 in #support

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?

11 replies

SSolidJS

•Created by mrVinicius on 10/16/2024 in #support

Store with const obj values passed to it does not update.

const initialViewable = {
    itemSource: true,
    itemCategory: true,
    itemType: true,
    inSearch: false,
    noFound: false,
};

const [viewable, setViewable] = createStore(initialViewable);

setViewable(initialViewable); // this does not work

setViewable({
    itemSource: true,
    itemCategory: true,
    itemType: true,
    inSearch: false,
    noFound: false,
}); // this does

const initialViewable = {
    itemSource: true,
    itemCategory: true,
    itemType: true,
    inSearch: false,
    noFound: false,
};

const [viewable, setViewable] = createStore(initialViewable);

setViewable(initialViewable); // this does not work

setViewable({
    itemSource: true,
    itemCategory: true,
    itemType: true,
    inSearch: false,
    noFound: false,
}); // this does

Once a condition is met, I need to reset my component. I thought of doing this by using the initial values I used to instantiate a store. However, if I pass the constant directly, it doesn't work, but if I pass an object manually, it does. Why is that?

11 replies

SSolidJS

•Created by mrVinicius on 10/10/2024 in #support

Stores & CreateResource

Why createResources doesn't work with a store? console.log("currentPageParam", params.currentPage) properly shows me that the store itself is being updated, but the signal change is not being passed into createResource like with a regular signal does. If instead i use a regular signal currentPage() the signal is triggered on createResource, what i am missing?

const pagination = createPagination();
const [params, setParams] = createStore<ConstructionCatalogItemListParams>();
const [currentPage, setCurrentPage] = createSignal<Record<string, string>>();
const [itemResource] = createResource(params, constructionCatalogItemList);

createEffect(() => {
        // here i am updating my store query params values, these values are coming from pagination context.
    setParams((prev: ConstructionCatalogItemListParams) => {
                // setCurrentPage is a signal as my plan B, this shouldn't be here if stores worked
        console.log("currentPage:", pagination.currentPage());
        setCurrentPage({ currentPage: pagination.currentPage().toString() });
        return {
            ...prev,
            currentPage: pagination.currentPage(),
        };
    });
        // params was successfully set.
    console.log("currentPageParam", params.currentPage);
});

const pagination = createPagination();
const [params, setParams] = createStore<ConstructionCatalogItemListParams>();
const [currentPage, setCurrentPage] = createSignal<Record<string, string>>();
const [itemResource] = createResource(params, constructionCatalogItemList);

createEffect(() => {
        // here i am updating my store query params values, these values are coming from pagination context.
    setParams((prev: ConstructionCatalogItemListParams) => {
                // setCurrentPage is a signal as my plan B, this shouldn't be here if stores worked
        console.log("currentPage:", pagination.currentPage());
        setCurrentPage({ currentPage: pagination.currentPage().toString() });
        return {
            ...prev,
            currentPage: pagination.currentPage(),
        };
    });
        // params was successfully set.
    console.log("currentPageParam", params.currentPage);
});

10 replies

SSolidJS

•Created by mrVinicius on 8/29/2024 in #support

Help styling an component via props using TailwindCss.

28 replies

Gaming

Programming