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)

TransitionGroup from props derived from store duplicates items

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>
)

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} />

TransitionGroup from props derived from store duplicates items

Similar Threads

TransitionGroup from props derived from store duplicates items

Similar Threads

Similar Threads

Similar Threads