title: Animate transition on a react component that i hide on re-render
body: <p>i m using reactjs and i have a datepicker component that i hide when the user clicks outside of the component element.</p>
  
  <p>the code snippet is like so: </p>
  
  <pre><code>`
  class DatePicker extends Component{
     constructor(props){
        super(props)
        state= { focus: false }  // when focus: false i hide the dates component 
    }    
    .......
    render(){
      const { focus } = this.state
  
      return(
        &lt;input type="text" placeholder="start date"&gt;
        &lt;input type="text" placeholder="start date"&gt;
        {focus &amp;&amp;  &lt;DatesContainer ...props&gt;} // if focus==false i dont show the &lt;DatesContainer&gt; component.I need to hide it with fade out or something.
      )
    }
  }`
  </code></pre>
  
  <p>So when the user clicks outside of the <code>&lt;DatesContainer/&gt;</code> the state.focus updates to false, the  re-renders and, this time, the <code>&lt;DatesContainer/&gt;</code> is not render at all, so far so good. But i need to hide it with a 0.3s animation.</p>
  
  <p>Any opinions on that ?</p>