useTransition on Array return undefined Array propeties (React Spring)

Question

I'm quite new to React Spring, so when I use UseTransition on an array of object the value return from it is undefined

  const transitions = useTransition(people, (item) => item.id, {
    enter: { transform: "translateX(0rem)", opacity: 1 },
    leave: { transform: "translateX(-20rem)", opacity: 0 },
    config: { duration: 500 },
  });
  return (
    <>
      <div className="ppl-lst">
        {transitions.map(({ item, key, props }) => {
          return (
            <animated.div style={props} key={key}>
              <div className="ppl lst-name">{item.name}</div>
              <div className="ppl lst-email">{item.email}</div>
            </animated.div>
          );
        })}
      </div>
    </>
  );

There was an error pointing to the map function

TypeError: Cannot read property 'name' of undefined

the weird thing is it worked before when I'm using react-spring 8.0.27, now I'm using react-spring 9.1.2. Please let me know if I'm missing anything

from the doc, https://react-spring.io/hooks/use-transition, doesn't seem `useTransition` second argument can be `item=>item.id`. — windmaomao, May 21 '21 at 17:21

score 3 · Accepted Answer · answered Oct 08 '21 at 08:15

The API for useTransition has change in v9 and is documented. It should look something like this:

 const transitions = useTransition(people, {
    enter: { transform: "translateX(0rem)", opacity: 1 },
    leave: { transform: "translateX(-20rem)", opacity: 0 },
    config: { duration: 500 },
  });
  return (
    <>
      <div className="ppl-lst">
        {transitions((props, item) => {
          return (
            <animated.div style={props} key={key}>
              <div className="ppl lst-name">{item.name}</div>
              <div className="ppl lst-email">{item.email}</div>
            </animated.div>
          );
        })}
      </div>
    </>
  );

For more information see the documentation here – https://react-spring.io/hooks/use-transition

Also as a side note you can shorthand your transform prop to just x like this:

const transitions = useTransition(people, {
    enter: { x: "0rem", opacity: 1 },
    leave: { x: "-20rem", opacity: 0 },
    config: { duration: 500 },
  });

When passing there is no need to interpolate as the animated component understands how to handle this shorthand. See these docs – https://react-spring.io/basics#shorthand-style-props

score 0 · Answer 2 · answered Oct 23 '22 at 14:20

I am new at react-spring, currently reading their documentation, but it feels like not satisfying documentation, also their beta documentation

but we are the same thing facing on this issue, as what I observe on the hooks of react-spring they have overloading wherein if the 2nd parameter of hooks are callback, the returned value are accessible as iterrable, but if not it is just single value

//types of cast
const [transtStyle, transtController] = useTransition(items, ()=> ({ ... }));
const transtStyle = useTransition(items, { ... });

and yes still exploring the react-spring

useTransition on Array return undefined Array propeties (React Spring)

2 Answers2