title: How can I get my animation to reset each time the state of my component is changed?
body: <p>I have a fade-in animation I want to use for a particular parent component. The problem is, the animation only occurs the first time the component is rendered. When I change the state by clicking a button, the animation does not reset and get triggered again.</p>
  
  <p>This is in a react-redux application. I haven't tried adding an action and reducer and then utilizing componentDidMount(). Any help would be greatly appreciated.</p>
  
  <p>Here's the component that renders the data:</p>
  
  <pre><code>export class Doctors extends React.Component {
      componentDidMount() {
          this.props.dispatch(fetchProfileInfo(this.props.user.id));
      }
  
  render() {
      if (this.props.profile.doctors) {
          const cards = this.props.profile.doctors.map((d, i) =&gt; {
              return {
                  previous: i === 0 ? null : i - 1,
                  next: i === this.props.profile.doctors.length - 1 ? null : i + 1,
                  doctor: d
              };
          });
      const d = cards[this.props.currentDoctor].doctor;
      console.log('this.props.profile.doctors', this.props.profile.doctors);
          return (
              &lt;div className="container"&gt;
                  &lt;NavigationBar /&gt;
                  &lt;main role="main"&gt;
                      &lt;h1 className="doctors-h1"&gt;Doctors&lt;/h1&gt;
                      &lt;div className="doctor-display-section"&gt;
                          &lt;Doctor doctor={d} /&gt;
                      &lt;/div&gt;
                      &lt;div className="doctor-button-holder"&gt;
                          &lt;button
                              className={this.props.currentDoctor !== 0 ? 'display-doctor-button-1' : 'hidden-1'}
                              onClick={() =&gt; this.props.dispatch(updateCurrentDoctor(cards[this.props.currentDoctor].previous))}
                          &gt;
                              &lt;p className="fas fa-long-arrow-alt-left"&gt;&lt;/p&gt;
                              &lt;p className="display-profile-section-button-p"&gt;
                                  {cards[this.props.currentDoctor].previous === null ? '' : cards[this.props.currentDoctor - 1].doctor.name.firstName +
                                  ' ' + cards[this.props.currentDoctor - 1].doctor.name.lastName}
                              &lt;/p&gt;
                          &lt;/button&gt;
                          &lt;button
                              className={this.props.currentDoctor !== cards.length - 1 ? 'display-doctor-button-2' : 'hidden-1'}
                              onClick={() =&gt; this.props.dispatch(updateCurrentDoctor(cards[this.props.currentDoctor].next))}
                          &gt;
                              &lt;p className="fas fa-long-arrow-alt-right"&gt;&lt;/p&gt;
                              &lt;p className="display-profile-section-button-p"&gt;
                                  {cards[this.props.currentDoctor].next === null ? '' : cards[this.props.currentDoctor + 1].doctor.name.firstName +
                                  ' ' + cards[this.props.currentDoctor + 1].doctor.name.lastName}
                              &lt;/p&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/main&gt;
                  &lt;Footer /&gt;
              &lt;/div&gt;
          );
      }
      return (
          &lt;div&gt;
              loading...
          &lt;/div&gt;
      );
   }
  }
  
  const mapStateToProps = state =&gt; ({
      user: state.auth.currentUser,
      profile: state.app.profile,
      currentDoctor: state.app.currentDoctor
  });
  
  export default requiresLogin()(connect(mapStateToProps)(Doctors));
  </code></pre>