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.
this.setText(str)
for the component and put thesetTimeout
in there instead of in.render()
you can use props/state to trigger therender()
– dandavis Feb 18 '16 at 21:50