SolidJS•4w ago

TransitionGroup from props derived from store duplicates items

I'm very new to solidjs (this is my first project) and I'm trying to migrate a simple react shoppinglist app to it. Very happy with how everything is working so far, but now I've ran into a problem I can't seem to solve. I have the following component to which I'm trying to add animations when items are moved around:

interface ShoppingListProps {
  items: Item[]
}

const ShoppingList: Component<ShoppingListProps> = (props) => (
  <TransitionGroup name="group-item">
    <For each={props.items}>
      {(item, i) => (
        <ShoppingListItem
          isOnly={props.items.length === 1}
          isLast={i() === props.items.length - 1}
          {...item}
        />
      )}
    </For>
  </TransitionGroup>
)

interface ShoppingListProps {
  items: Item[]
}

const ShoppingList: Component<ShoppingListProps> = (props) => (
  <TransitionGroup name="group-item">
    <For each={props.items}>
      {(item, i) => (
        <ShoppingListItem
          isOnly={props.items.length === 1}
          isLast={i() === props.items.length - 1}
          {...item}
        />
      )}
    </For>
  </TransitionGroup>
)

When moving items around (by 'checking off' a shopping list item it gets moved to the bottom), there is no animation and the item is duplicated. What am I missing here? The props.items comes from a createStore which is passed through using a context.

const [state, dispatch] = useStore() // can you tell I'm coming from react?
<ShoppingList items={state.items} />

const [state, dispatch] = useStore() // can you tell I'm coming from react?
<ShoppingList items={state.items} />

If I omitted some crucial piece of code for trouble shooting, please ask or you can look at the full source code can be found here: https://github.com/Boelensman1/shoppinglist/blob/solid/client-solid/ (copied parts above come from src/App.tsx)

1 Reply

mdynnl•4w ago

you're on the right track with mutative code. here are the missing pieces useStore() naming is also the same in solid for using things that are created in advance. e.g useContext, useTransition vs createSignal, createMemo etc

Gaming

Programming

TransitionGroup from props derived from store duplicates items