title: FadeIn and FadeOut effect using React JS
body: <p>I have something like this :</p>
  
  <pre><code>var Hello = React.createClass({
      getInitialState: function(){
      return {
          opacity: 0
      }
    },
  
    handleClick: function(event){
      event.preventDefault();
      this.setState({opacity: 1});
    },
  
    render: function() {
      return &lt;div&gt;
          &lt;div style={{opacity: this.state.opacity, transition: "opacity 1s"}}&gt;Test&lt;/div&gt;
        &lt;a href="" onClick={this.handleClick}&gt;Click&lt;/a&gt;
      &lt;/div&gt;;
    }
  });
  
  ReactDOM.render(
    &lt;Hello name="World" /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <p>Here is <a href="https://jsfiddle.net/Borisboky/69z2wepo/51771/" rel="nofollow"><code>jsfiddle</code></a></p>
  
  <p>I want that div with text test within doesn't shows up on page load. Then if I click on the link that that div shows up. That is what this example do.</p>
  
  <p>But I want that after the div shows up after the click, a few seconds later it disappears again. (I need somehow set opacity to 0 again).</p>
  
  <p>Any advice?</p>