How to animate every time a component is shown?

[benlieb]

With the code below, the animation only runs on the first page load, but not when the value of this.state.mode changes, showing the other component.

How can I get the animation to run every time?

{ this.state.mode === 'read'
?
  <Fade>
    <TextComponent />
  </Fade>
:
  <Fade>
    <FormComponent />
  </Fade>
}

[jpgutti]

Hey @benlieb , you could try passing the prop spy as the documentation says.

spy: Any change in this prop value will cause the element to be revealed again. It makes sense to set it to some state variable. Disables the initial reveal animation (use appear prop to reenable it).

Something like this:

  <Fade spy={this.state.mode}>
    <TextComponent />
  </Fade>

And every time state.mode change the animation is triggered again

[akashraj9828]

You can do it using key prop

<Fade key={this.state.mode}> <TextComponent /> </Fade>

Every time key changed the component is unmounted and mounted again and will trigger the animation