title: React fade in element
body: <p>I have a <code>Basket</code> component which needs to toggle a <code>BasketContents</code> component when clicked on. This works:</p>
  
  <pre><code>constructor() {
      super();
      this.state = {
        open: false
      }
      this.handleDropDown = this.handleDropDown.bind(this);
    }
    handleDropDown() {
      this.setState({ open: !this.state.open })
    }
      render() {
          return(
              &lt;div className="basket"&gt;
                  &lt;button className="basketBtn" onClick={this.handleDropDown}&gt;
                      Open
                  &lt;/button&gt;
                {
                  this.state.open
                  ?
                  &lt;BasketContents /&gt;
                  : null
                }
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>It uses a conditional to either display the <code>BasketContents</code> component or not. I now want it to fade in. I tried adding a <code>ComponentDidMount</code> hook to <code>BasketContents</code> to transition the opacity but that doesn't work. Is there a simple way to do this?</p>