React-spring: TypeError: arr[Symbol.iterator] is not a function

Created on 2 Apr 2019  路  2Comments  路  Source: pmndrs/react-spring

Dear Team,

I tried getting into react-spring but always get the above mentioned error. Even a fresh new npx create-react-app and npm i react-spring as the only additional dependency doesn't get rid of this error.

Am I missing something obvious here?

codesandbox

Thanks a lot
Malte

question

Most helpful comment

Hey Malte,

it's either

const props = useSpring({ width: `${value}%`, from: { width: "0%" } });

or

const [props, set, cancel] = useSpring(() => ({ width: `${value}%`, from: { width: "0%" } }))

The first spring can be overwritten with fresh props, the second can't be mutated and offers a "set" instead, similar to useState. See: https://www.react-spring.io/docs/hooks/use-spring The second signature is for cases where you want to steer the animation without causing a render, for instance inside a mousemove event, etc, where it would be expensive to cause render passes each frame.

In your case, you're trying to destructure a non-iterable result, "props" is an object ;-)

All 2 comments

Hey Malte,

it's either

const props = useSpring({ width: `${value}%`, from: { width: "0%" } });

or

const [props, set, cancel] = useSpring(() => ({ width: `${value}%`, from: { width: "0%" } }))

The first spring can be overwritten with fresh props, the second can't be mutated and offers a "set" instead, similar to useState. See: https://www.react-spring.io/docs/hooks/use-spring The second signature is for cases where you want to steer the animation without causing a render, for instance inside a mousemove event, etc, where it would be expensive to cause render passes each frame.

In your case, you're trying to destructure a non-iterable result, "props" is an object ;-)

Oh, okay. So it was something obvious indeed...

Thank you very much for your help!

Was this page helpful?
0 / 5 - 0 ratings