0

In my react app I have component, where I using Transition from react-spring.

import { Transition } from 'react-spring'

export class myComponent {
 state = {
   items: []
 }

 static getDerivedStateFromProps(props, state){
    const newItems = [...props.items]

    if(props.items !== state.items){
      return {items: newItems}
    }
 }

 render() {
  const { items } = this.state

        <Transition
        items={items}
        keys={item => items.id}
        initial={{ opacity: 1, height: 'auto' }}
        from={{ opacity: 0, height: 0 }}
        enter={{ opacity: 1, height: 'auto' }}
        leave={{ opacity: 0, height: 0 }}
      >
        {item => propsAnimations => (
          <section style={propsAnimations}>
            <Item
              key={item.selectionId}
            />
          </section>
        )}
      </Transition>
 }
}

But when I updating this.state.items this is didn't repeat animation. When I updating items in state, I change only elements order in array.

Volodymyr Humeniuk
  • 3,411
  • 9
  • 35
  • 70
  • is there a reason you can't just use the items from the props in render? – Will Jenkins Jun 03 '19 at 13:30
  • @WillJenkins this is didn't change situation with animations. Still it's run animation only 1 time, and didn't repeat it when I update `items`. – Volodymyr Humeniuk Jun 03 '19 at 13:34
  • Ok, best to avoid the getDerivedState stuff if possible. So if your prop items are definitely updating, maybe it's that your keys (items.id and item.selectionId) are not changing, so it isn't triggering a transition. Have you tried removing your key mapping so it uses the default? (item => item) – Will Jenkins Jun 03 '19 at 13:44

0 Answers0