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, react-spring.io/hooks/use-transition, doesn't seem useTransition second argument can be item=>item.id. — windmaomao
– windmaomao, Commented May 21, 2021 at 17:21

Josh · Accepted Answer · 2021-10-08 08:15:57Z

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

Marvin · Accepted Answer · 2022-10-23 14:20:56Z

0

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

answered Oct 23, 2022 at 14:20

Marvin

7768 silver badges17 bronze badges

Collectives™ on Stack Overflow

useTransition on Array return undefined Array propeties (React Spring)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related