useTransition on Array return undefined Array propeties (React Spring)

  arrays, javascript, react-spring, reactjs

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

Source: Ask Javascript Questions

LEAVE A COMMENT