title: react-transition-group transition initial render without props/state
body: <p>I'm currently implementing a Modal component within my app, using Portals.  What I'm trying to achieve is that when the Modal component is rendered, it should fade in and when it's no longer rendered it should fade out.</p>
  
  <p>Looking at the react-transition-group docs it appears that props have to be used in order to achieve this, however I'd like a solution without any form of state or props.  Consider:</p>
  
  <pre><code>&lt;App&gt;
  &lt;Modal /&gt;
  &lt;/App&gt;
  </code></pre>
  
  <p>App should load as normal, however Modal should fade in.  When Modal is no longer rendered based on some condition way above these components, it should fade out.</p>
  
  <p>Here's the actual code for </p>
  
  <pre><code>import Fade from "../Fade";
  import { TransitionGroup } from "react-transition-group";
  
  const Modal = ({ children, ...other }) =&gt; {
  
  return (
  &lt;Portal&gt;
    &lt;TransitionGroup&gt;
      &lt;Fade&gt;
        {children}
      &lt;/Fade&gt;
    &lt;/TransitionGroup&gt;
  &lt;/Portal&gt;
  );
  };
  </code></pre>
  
  <p>And for the Fade component:</p>
  
  <pre><code>import { CSSTransition } from 'react-transition-group';
  
  const Fade = ({ children, ...other }) =&gt; (
  
  &lt;CSSTransition
  {...other}
  timeout={500}
  classNames={{
    //my classes here
  }}
  &gt;
  {children}
  &lt;/CSSTransition&gt;
  );
  </code></pre>
  
  <p>Any suggestion?  I'm sure this used to work, before React 16 and react-css-transitions changed to react-transition-group but I'm having a very hard time figuring this out.</p>
  
  <p>To be clear, I can transition using state/props and have a working example of this but that is not what I'm trying to achieve.  I'd like  to fade in when it is rendered, and fade out when it is un-rendered... </p>
  
  <p>Thanks!</p>