[SOLVED] How to make text fade in React?

JavaScript
1

I’d like some messages in my pomodoro clock to change based on time passed in state. I’d like one message to fade out then the next message to fade in when they change. Here’s what I have now:

<h3 className="message">{!this.state.timerActive ? "Set a time." : (this.state.time < 50) ? "Done." : "Focus."}</h3> I’d like for the text to fade in and out.

How can I achieve this in React? I’ve tried ReactCSSTransitionGroup but couldn’t wire it up right.

EDIT: I figured it out. Here’s the new code:

          <CSSTransitionGroup
            transitionName="fade"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
          >
            {!this.state.timerActive ? <h3 className="message" key="set">Set a time.</h3> : (this.state.time < 50) ? <h3 className="message" key="done">Done.</h3> : <h3 className="message" key="focus">Focus.</h3>}
          </CSSTransitionGroup>

Having a separate element and key prop for each message was the solution I was looking for.

1 Like
2

Can you please share this code in jsFiddle so easy to debug and help you.