title: Removing element from DOM after set amount of time
body: <p>I'm trying to figure out the React way to remove an element from the DOM after an event if fired.</p>
  
  <p>I am attempting to flash an alert (<code>copySuccess</code>) when <code>onClick={this.props.handleCopyFact}</code> is fired, and then fade that alert out after 5 seconds. The state of each of these are set within a parent component.</p>
  
  <p>Here is the code for my component:</p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = React.createClass({
  
  render: function() {
  
  var copy = null;
  if (!this.props.copying &amp;&amp; !this.props.editting) {
    copy = (
      &lt;div className="copy-fact-container" onClick={this.props.handleCopyFact}&gt;
        &lt;i className="icon-copy"&gt;&lt;/i&gt;
        &lt;span&gt;Copy&lt;/span&gt;
      &lt;/div&gt;
      );
  
  }
  
  var copySuccess = null;
  if (this.props.copySuccess) {
    copySuccess = (
      &lt;div className="copy-success"&gt;
        &lt;div&gt;&lt;i className="icon icon-clipboard"&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;p className="heading"&gt;Copied to Clipboard&lt;/p&gt;
      &lt;/div&gt;
      );
  }
  
  return (
    &lt;div className="row-body"
      onMouseEnter={this.props.toggleCopyFact}
      onMouseLeave={this.props.toggleCopyFact}&gt;
      &lt;MDEditor editting={this.props.editting}
        content={this.props.content}
        changeContent={this.props.changeContent}/&gt;
    {copy}
    {copySuccess}
    &lt;/div&gt;
  );
  }
  });
  </code></pre>