title: ReactJS: Fade in div and fade out div based on state
body: <p>So, I am trying to fade in and fade out a set of inputs based on what button the user clicks. I tried using jQuery, but, the div was fading in and fading out at the same speed...</p>
  
  <p>I am using es6 classes and react.</p>
  
  <p>What I want is the user to <strong>press a button and the inputs fadeIn. Another button, the inputs fadeOut</strong>. I don't mind using jQuery, but I would like to understand how to do this with react.</p>
  
  <pre><code>renderInputs() {
    if (this.state.addType === "image") {
      return (
        &lt;div className="addContainer"&gt;
          &lt;input type="text" className="form-control" /&gt;
        &lt;/div&gt;
      )
    } else {
      return (
       other inputs
      )
    }
  }
  
  render() {
    return (
      &lt;CSSTransitionGroup
        transitionName="fadeInput"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}&gt;
  
        {this.renderInputs()} // this doesn't work but I want this content to be conditional.
  
      &lt;/CSSTransitionGroup&gt;
    )
  }
  
  // SCSS
  .fadeInput-enter {
    opacity: 0.01;
  }
  
  .fadeInput-enter.fadeInput-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  
  .fadeInput-leave {
    opacity: 1;
  }
  
  .fadeInput-leave.fadeInput-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
  }
  </code></pre>