Fade out / in text when changing in React

Question

I want to create a button that changes its text based on the state of the application. I want the old text to fade out, and then the new text to fade in.

Here's a pen where I've implemented what I want in pure JS.

How would I achieve the same effect in React - or what would be the best approach?

For reference, here is my JSX:

<div className="buttons">
  <div className="half">
    <button className="button" onClick={this.chooseLeft}>{this.state.leftButton}</button>
  </div>
  <div className="half">
    <button className="button" onClick={this.chooseRight}>{this.state.rightButton}</button>
  </div>
</div>

Edit:

I tried with ReactCSSTransitionGroup, but it didn't work quite as expected. It added the new text, then faded out the old one while fading in the new one.

Answer 1

Use ReactCSSTransitionGroup, part of react's animation add-ons. It's designed for your exact use case.