React fade in element : <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>
