Simple animation with useTransition in react-spring

Question

I have a very simple example about useTransition , my expectation is whenever i click on the shuffle button, the items below swap around by a smooth animation. But i doesn't work, the item does swapping but also the pos property. I think my understand about key in useTransition has something wrong, but i can't find it.

my current code: https://codesandbox.io/s/wonderful-solomon-c0sve?file=/src/index.jsx

what im trying to do is something like this

function App() {

  const [items, setState] = useState([
    { name: 'C' },
    { name: 'D' },
    { name: 'E' },
    { name: 'F' },
    { name: 'G' },
    { name: 'A' },
    { name: 'B' },
  ]);

  let index = -1;
  const gridItems = items.map((item) => {
    index += 1;
    return { ...item, pos: index * 60 };
  });

  const transitions = useTransition(gridItems, item => item.name, {
    from: () => ({ pos: -100 }),
    enter: ({ pos }) => ({ pos }),
    udpate: ({ pos }) => ({ pos }),
    leave: () => ({ pos: -100 }),
  });

  return (
    <div>
      This is app<br/>
      <button onClick={ () => setState(Lodash.shuffle) }>shuffle</button><br/><br/>
      <div>
        {transitions.map(({ item, props, key }) => {
          return (
            <animated.div
              key={key}
              className="item"
              style={{ transform: props.pos.interpolate(pos => `translateY(${pos}px)`) }}
            >
              {`${item.name}`}
            </animated.div>
          )
        })}
      </div>
    </div>
  )
}

Answer 1

It was an age to figuring it out. You made a typo. Try with this one:

update: ({ pos }) => ({ pos }),