React TransitionGroup lifecycle methods not being called when component is loaded

Question

I'm trying to animate a list entering and exiting with gsap, so I wrapped my list with <TransitionGroup>. I want to use componentWillEnter and componentWillLeave to trigger my animations, but they aren't being called. I've checked everything 1000x and can't figure it out... Should I be using <Transition> instead for this sort of animation?

import React from "react";
import { TransitionGroup } from "react-transition-group";

import animations from './animations';

class Events extends React.Component {
  componentWillEnter(cb) {
    console.log('entered');
    const items = document.getElementsByClassName("items");
    animations.animateIn(items, cb);
  }
  componentWillLeave(cb) {
    console.log('exited');
    const items = document.getElementsByClassName("items");
    animations.animateOut(items, cb);
  }


  render() {
    const event = this.props.event;
    return (
      <li key={event._id} className="items">
        <h1>{event.title}</h1>
      </li>
    );
  }
}

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      events: []
    };
  }
  componentDidMount() {
    return fetch("https://pickup-btown.herokuapp.com/api/event/biking", 
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      },
      mode: "cors"
    })
      .then(response => {
        return response.json();
      })
      .then(events => {
        this.setState({ events: events.docs });
      })
      .catch(err => console.log(err));
  }

  unLoad(e) {
    e.preventDefault();
    this.setState({ events: [] });
  }
  render() {
    const events = this.state.events;
    return (
      <section>
        <button onClick={this.unLoad.bind(this)}>back</button>
        <TransitionGroup component="ul">
          {events.length ? (
            events.map(event => {
              return <Events event={event} key={event._id} />;
            })
          ) : (
            <div />
          )}
        </TransitionGroup>
      </section>
    );
  }
}

export default Main;

Any help would be much appreciated!

Where you are calling `componentWillEnter` and `componentWillLeave` in `Events` component? — Elumalai Kaliyaperumal, Dec 07 '17 at 16:21

Elumalai Kaliyaperumal · Accepted Answer · 2017-12-08T04:38:36.033

1

Child component life cycle methods has been removed in current react-transition-group and you can use onEnter and onExit methods to achieve like in your Events component will be

class Events extends React.Component {
  render() {
    const event = this.props.event;
    return (
      <Transition
        timeout={300}
        key={event._id}
        onEntering={el => console.log("Entering", el)}
        onEnter={el => console.log("enter", el)}
        onExit={el => console.log("exit", el)}
        in={true}
      >
        <li
          key={event._id}
          className="items"
        >
          <h1>{event.title}</h1>
        </li>
      </Transition>
    );
  }
}

I have worked on your codesandbox also and its working. For detailed info please go through documentation.

edited Dec 08 '17 at 04:38

answered Dec 07 '17 at 16:26

Elumalai Kaliyaperumal

1,498
1
12
24

Thanks for the reply, but I don't think componentWillMount and componentWillUnmount work the same inside a `` wrapper. It needs a callback from componentWillLeave to signal to remove the component. It should work fine with componentWillEnter and componentWillLeave, right? – DJO Dec 07 '17 at 16:55
Yes you are correct. Problem may be with your callback I think! Please check your callback in `animateIn` method.. – Elumalai Kaliyaperumal Dec 07 '17 at 17:59
Ya I originally had exactly what you just suggested. I've tried componentWillAppear as well, but no luck. My console.log isn't working, so there has to be something wrong with how the component is being wrapped, but I've tried every variation I can think of... here's the link to the sandbox if that helps: https://codesandbox.io/s/0oypv2lzqp – DJO Dec 07 '17 at 18:13
Child lifecycle methods has been removed in current version. So you could try `onEnter` and `onExit` instead. I have updated the answer please take a look in to that! – Elumalai Kaliyaperumal Dec 08 '17 at 04:40
Wow, thank you so much. This is exactly what I needed to see, not sure why I couldn't realize it. You're the bomb – DJO Dec 11 '17 at 17:58

React TransitionGroup lifecycle methods not being called when component is loaded

1 Answers1