SolidJS•16mo ago

how to rerender component, when access store prop on component level?

Hi Guys, I have a store, which I have a property to be edited. Once the property is set, a modal should open, if the property is unset, the model closes. something like this:

const [stores, setStore] = createStore({
    ticket: { id: 1, name: 'My first ticket' },
});

function TicketModal() {
    const ticket = stores.ticket;

    createEffect(() => {
        console.log(stores.ticket);
    });

    if (ticket) {
        return <>render Modal</>;
    }

    return <>no Modal</>;
}

const [stores, setStore] = createStore({
    ticket: { id: 1, name: 'My first ticket' },
});

function TicketModal() {
    const ticket = stores.ticket;

    createEffect(() => {
        console.log(stores.ticket);
    });

    if (ticket) {
        return <>render Modal</>;
    }

    return <>no Modal</>;
}

but this wont work. If I wrap my access on the ticket of the store in a create effect, I can see it changes. what I thought of, to create a signal, set the signal via createEffect, and then render the modal. But I like to avoid this approach. is there a better way?

1 Reply

REEEEE•16mo ago

Since components in solid do not rerender, ticket will always be the value of stores.ticket when TicketModal was mounted. What you want instead is a function, const ticket = () => stores.ticket Additionally, since components do not rerender, early returns do not work. You'll want to make use of Show

const [stores, setStore] = createStore({
    ticket: { id: 1, name: 'My first ticket' },
});

function TicketModal() {
    const ticket = () => stores.ticket;

    createEffect(() => {
        console.log(stores.ticket);
    });

   return(
    <Show when={ticket()} fallback={<> No modal </>}>
      <> Render Modal </>
    </Show>
   )
}

const [stores, setStore] = createStore({
    ticket: { id: 1, name: 'My first ticket' },
});

function TicketModal() {
    const ticket = () => stores.ticket;

    createEffect(() => {
        console.log(stores.ticket);
    });

   return(
    <Show when={ticket()} fallback={<> No modal </>}>
      <> Render Modal </>
    </Show>
   )
}

Gaming

Programming

how to rerender component, when access store prop on component level?