CODEWITHSUNDEEP
javascriptarraysreactjsreact-spring
James_dawn
James_dawn

Reputation: 33

useTransition on Array return undefined Array propeties (React Spring)

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

Upvotes: 3

Views: 889

Answers (2)

Marvin
Marvin

Reputation: 754

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

Upvotes: 0

Josh
Josh

Reputation: 682

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

Upvotes: 3

Related Questions