SolidJS•2d ago

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?