React-Transition-Group
Hi! I've been struggling a lot with
react-transition-group
and I'm wondering if there's anything obvious I'm missing. I've been following the examples presented here https://reactcommunity.org/react-transition-group/transition-group
My page has a 3-tab layout which is switched using the icons at the top of the page. I then use a state enum activeView
to switch between the views using the following code:
Additionally I have some CSS containing the transitions but I don't think that is relevant to my problem.
As I've understood it, TransitionGroup
combined with CSSTransition
should apply classes to my WeightView, WorkoutView
and NutritionView
components, no such classes are ever applied in the browser.
Have I overlooked something obvious? Does my object indexing control flow not cause the components to mount and unmount? I can't see how that wouldn't be the case.2 Replies
Addtionally, in each component the ref is passed to the root element in each component
I managed to find the answer myself. Each child component also needs a key for TransitionGroup to function