Simple React.js implementation

Question

I have a relatively simple app with a header and a main section of content. The main section can show up to 4 different types of components, but only 1 component at a time. Each component needs to have the ability to transition (slide) from one component to the next depending on the state.

As of now, my main application component holds the state as to which component should be shown. This main application component also renders all 4 of the top-level components. Each of the 4 top-level components hide/show themselves based upon the application state. Is this the best way of toggling the different components on and off, or should I manually mount and unmount each component? If I take the mount/unmount approach am I still able to easily transition each element?

Answer 1

I would have upvoted or commented on Douglas' answer but I dont have enough rep!

ReactCSSTransitionGroup will do what you want. Adopt the tutorial example to suit your purposes and dont forget to write your animation styles first (ReactCSSTransitionGroup relys on CSS animationend callback to know when the elements have left/entered the dom). It will add helper classes for you so you can create a transition effect between the (incoming and outgoing) elements.

Answer 2

A ReactCSSTransitionGroup will probably do what you need, at the very least you could look at the implementation to see how they do it.