title: Basic transition when component unmount with react-transition-group v2 (march 2018)
body: <p>My code for setting up a Fade transition is the simplest :</p>
  
  <pre><code>import React from 'react';
  import { Transition } from 'react-transition-group';
  import PropTypes from 'prop-types';
  
  const duration = 250;
  
  const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out, color ${duration}ms ease-in-out`,
    opacity: 0,
  }
  
  
  const transitionStyles = {
    entering: { opacity: 0 },
    entered: { opacity: 1 },
    exiting: { opacity: 1 },
    exited: { opacity: 0 },
  };
  
  
  export default class Fade extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        in: false,
      };
    }
  
    componentDidMount() {
      this.setState({ in: true });
    }
    componentWillUnmount() {
      this.setState({ in: false });
    }
  
    render() {
  
      return(
        &lt;Transition in={!!this.state.in} timeout={{ enter: 250, exit: 250, }} unmountOnExit={this.props.unmountOnExit || false} &gt;
          {(state) =&gt; {
            return (
              &lt;div 
                className={this.props.classes ? this.props.classes : ''} 
                style={{  ...defaultStyle, ...transitionStyles[state],}}&gt;
                {this.props.children}
              &lt;/div&gt;
            )
          }}
        &lt;/Transition&gt;
      )
    }
  }
  
  Fade.propTypes = {
    classes: PropTypes.string,
  };
  </code></pre>
  
  <p>Wrap any of your component within to try it out. I tried to build a snippet with it but I didn't succeed to build one with React, sorry about that.</p>
  
  <p>My question : thanks to <code>componentDidMount</code> I can toggle the state of my component and make the fade in work perfectly. However, I struggle putting in place the fade out : using <code>componentWillUnmount</code> doesn't make it work.</p>
  
  <p>What is the solution to my problem ? How should I delay the unmounting of the component in order to have the transition going on ?</p>