Peter Posts - Answer Overflow

Peter

•Created by Peter on 11/23/2024 in #support

How to keep an active item for a list of items in SolidJS?

https://stackoverflow.com/questions/79209391/how-to-keep-an-active-item-for-a-list-of-items-in-solidjs My app has a list of items where each item is an object, and one of the items can be in active state. I'm using SolidJS. My first idea was to represent the whole state of the app in a store:

const [store, setStore] = createStore({

  items: [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" }
  ],
  activeItem: null
});

const [store, setStore] = createStore({

  items: [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" }
  ],
  activeItem: null
});

This is not working, because when I change the activeItem, it modifies the previously active item.

setStore('activeItem', store.items[0]);
setStore('activeItem', store.items[1]); // This modifies the ID and Name of store.items[0]. We end up with an array with two bananas.

setStore('activeItem', store.items[0]);
setStore('activeItem', store.items[1]); // This modifies the ID and Name of store.items[0]. We end up with an array with two bananas.

What's the best practice in this situation? Store the active item outside the store? Store only ID of the active item, and find it on every access? Something else?

10 replies

SSolidJS

•Created by Peter on 3/23/2024 in #support

How to create a wrapper for SolidJS's setStore in TypeScript?

I have a SolidJS store defined:

const [store, setStore] = createStore<SomeComplexType>();

const [store, setStore] = createStore<SomeComplexType>();

I need to run some code before every execution of setStore, so I would like to wrap it with my own function. Is there a way to do that, that preserves all types and all overloads? So far, the best solution I've (heard)[https://stackoverflow.com/questions/78209469/how-to-create-a-wrapper-for-solidjss-setstore-in-typescript?noredirect=1#comment137881170_78209469] is:

// @ts-expect-error
const setStoreWithEffect: SetStoreFunction<Foo> = (...params: [any]) => {
    console.log("setStore invoked with parameters:", params);
    return setStore(...params);
};

// @ts-expect-error
const setStoreWithEffect: SetStoreFunction<Foo> = (...params: [any]) => {
    console.log("setStore invoked with parameters:", params);
    return setStore(...params);
};

But the error suppression makes it ugly. Is there any clean way to do this?

7 replies

Gaming

Programming