title: react-transition-group CSSTransition, conditional with null
body: <p>Trying to get a simple fade in/out transition working. </p>
  
  <p>I've tried moving the <code>&lt;CSSTransition&gt;</code> around into different areas to no avail. I'm using this successfully in another component that's mapping children but can't see why it wouldn't work in this case since I'm rendering it together with the child component, if the child gets returned at all.</p>
  
  <p><strong>Child component</strong></p>
  
  <pre><code>const Error = (props) =&gt; {
    return (
      &lt;CSSTransition timeout={400} classNames={errorTransition}&gt;
        &lt;span&gt; {props.errorString} &lt;/span&gt;
      &lt;/CSSTransition&gt;
    )
  }
  </code></pre>
  
  <p><strong>Parent component</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { CSSTransition } from 'react-transition-group';
  
  import type { InfoState } from './state';
  import { closeError } from './actions';
  
  const mapStateToProps = (state: {info: InfoState}) =&gt; ({
    info: state.info.data.info,
    infoError: state.info.infoError,
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
    closeError: () =&gt; dispatch(closeError()),
  });
  
  class Parent extends Component&lt;Props, State&gt; {
    state = { info: this.props.info };
  
    handleChange = (e) =&gt; {
      this.setState({ info: e.target.value });
      this.props.closeError();
    }
  
    render() {
      if (this.props.info === null) {
        return (
          &lt;div className="info-wrapper"&gt;
            &lt;input
              type="text"
              value={this.state.info ? this.state.info : '' }
              onChange={this.handleChange}
            /&gt;
          &lt;/div&gt;
          &lt;div className="info-error"&gt;
            { this.props.infoError !== ''
              ? &lt;Error 
                  key={this.state.info} 
                  errorString={this.props.infoError} 
                /&gt;
              : null
             }
          &lt;/div&gt;
        )
      }
      return ( &lt;div&gt; things &lt;/div&gt; )
    }
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.errorTransition-enter {
    opacity: 0.01;
  }
  .errorTransition-enter-active {
    opacity: 1;
    transition: all 400ms ease-out;
  }
  .errorTransition-exit {
    opacity: 1;
  }
  .errorTransition-exit-active {
    opacity: 0.01;
    transition: all 400ms ease-out;
  }
  </code></pre>