S
SolidJS•2mo ago
Peter

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?
Stack Overflow
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 ...
5 Replies
TaQuanMinhLong
TaQuanMinhLong•2mo ago
How about 
type Store = {
     items: Record<ItemId, Item>,
     active: ItemId
}
type Store = {
     items: Record<ItemId, Item>,
     active: ItemId
}
Peter
PeterOP•2mo ago
but then every time I want to access the active items properties I have to search through all items to find the one with active.id? isn't that unnecessarily slow?
REEEEE
REEEEE•2mo ago
set the activeItem to a copy of the item not the item directly. 
setStore('activeItem', {...store.items[0]});
setStore('activeItem', {...store.items[1]});
setStore('activeItem', {...store.items[0]});
setStore('activeItem', {...store.items[1]});
Depending on how nested it is you might have to make a deep copy
TaQuanMinhLong
TaQuanMinhLong•2mo ago
It's a record of id, so it should be indexed So accessing an active item is just 
store.items[store.active]
store.items[store.active]
Or you can just keep the active as index of item array and it works the same way
mdynnl
mdynnl•2mo ago
think of setStore('activeItem', ...) as Object.assign(store.activeItem, { ... }) so this modifies/merges the current object that is assigned to activeItem with new one rather than changing/replacing it naturally, this means to change/replace the value of activeItem, we need to go one level up to its parent, like so setStore({ activeItem: { ... } }) so this is similar to Object.assign(store, { activeItem: { ... } }) and that will replace the value of activeItem to new value rather than merging it this top level merging always catches people off guard, i think it deserves a dedicated section if we're to keep this

Did you find this page helpful?