just_me Posts - Answer Overflow

just_me

•Created by just_me on 1/3/2025 in #support

Solid MotionOne, how to animate presence in list (using For)

I'm trying to animate additions/removals of a list, but am running into problems. I have this code:

import { type Component, For } from "solid-js";
import { Motion, Presence } from "solid-motionone";

const Test: Component = () => {
  const items: string[] = ["a", "b"];
  return (
    <ul>
      <Presence>
        <For each={items}>
          {(item) => (
            <Motion>
              <li>{item}</li>
            </Motion>
          )}
        </For>
      </Presence>
    </ul>
  );
};

export default Test;

import { type Component, For } from "solid-js";
import { Motion, Presence } from "solid-motionone";

const Test: Component = () => {
  const items: string[] = ["a", "b"];
  return (
    <ul>
      <Presence>
        <For each={items}>
          {(item) => (
            <Motion>
              <li>{item}</li>
            </Motion>
          )}
        </For>
      </Presence>
    </ul>
  );
};

export default Test;

I would expect this to render two list items ('a' and 'b'), but it only renders 'a'. Why does this happen and how can I fix this? I have created a codesandbox here: https://codesandbox.io/p/devbox/motion-one-list-help-xftq5z?file=%2Fsrc%2FTest.tsx%3A1%2C1-22%2C1

3 replies

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

Gaming

Programming