#StackBounty: #react-transition-group How to fade one react component out, then fade another in?

Bounty: 50

I’ve got 2 components that are conditionally shown or hidden based on a string value stored in useState as showModal

{showModal === 'SIGNIN' && <SignIn />}
{showModal === 'JOIN' && <Join />}

I want to fade in one component, then when the state changes, fade it out and fade in the other component.

Can this be done with react transition group?

I tried

<TransitionGroup>
    <CSSTransition in={showModal === 'SIGNIN' ? true : false} classNames='fade' timeout={220} key={showModal}>
       <div> 
          <SignIn />
       </div>
     </CSSTransition>
     <CSSTransition in={showModal === 'JOIN' ? true : false} classNames='fade' timeout={220} key={showModal}>
       <div> 
         <Join />
       </div>
     </CSSTransition>
</TransitionGroup>

I don’t get any error, one component is shown, changing showModal from ‘SIGNIN’ to ‘JOIN’ does nothing. Inspecting the divs with the timeout set to 22000 shows that no new classes have been added.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.