0

I am trying to use react-spring and I have a very simple animation for a component that should be moounted/unmounted on toggle.

const state = useContext(MyContext)
  const transitions = useTransition(state.nav, null, {
    from: { tranform: 'translate3d(-100%, 0, 0)' },
    enter: { transform: 'translate3d(0, 0, 0)' },
    leave: { tranform: 'translate3d(-100%, 0, 0)' },
  })
  return transitions.map((item, key, props) => (
    <animated.div style={props} key={key}>
      <Navigation items={items} />
    </animated.div>
  ))

However when I run this in the browser I get this error:

Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.

Apart from using Context I can't see nothing wrong, when I look at other tutorial. Any help is appreciated thanks!

Kaiser Soze
  • 1,362
  • 3
  • 14
  • 31
  • Does this answer your question? [React Spring - Animate element between renders](https://stackoverflow.com/questions/61066170/react-spring-animate-element-between-renders) – Tom Apr 25 '20 at 07:58

1 Answers1

0

It seems you are missing a destruction operator at transitions.map.

return transitions.map((item, key, props) => (

Should be

return transitions.map(({ item, key, props }) => (

See the docs at https://www.react-spring.io/docs/hooks/use-transition.

Also, keep in mind that items on the functions are the values of state.nav.

Matt
  • 354
  • 1
  • 5