just_me
just_me
PostsComments
SSolidJS
Created by just_me on 6/13/2024 in #support
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)
3 replies