Theo's Typesafe Cult•2y ago

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:

<div className="flex grow flex-col items-center">
  <TransitionGroup className="panels" component={null}>
    {
      {
        weight: (
          <CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
            <WeightView nodeRef={weightRef}/>
          </CSSTransition>
        ),
        workout: (
          <CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
        <WorkoutView nodeRef={workoutRef}/>
          </CSSTransition>
        ),
        nutrition: (
          <CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
        <NutritionView nodeRef={nutritionRef} />
          </CSSTransition>
        ),
      }[activeView]
    }
  </TransitionGroup>
</div>

<div className="flex grow flex-col items-center">
  <TransitionGroup className="panels" component={null}>
    {
      {
        weight: (
          <CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
            <WeightView nodeRef={weightRef}/>
          </CSSTransition>
        ),
        workout: (
          <CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
        <WorkoutView nodeRef={workoutRef}/>
          </CSSTransition>
        ),
        nutrition: (
          <CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
        <NutritionView nodeRef={nutritionRef} />
          </CSSTransition>
        ),
      }[activeView]
    }
  </TransitionGroup>
</div>

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

Vincent UdénOP•2y ago

Addtionally, in each component the ref is passed to the root element in each component

Vincent UdénOP•2y ago

I managed to find the answer myself. Each child component also needs a key for TransitionGroup to function

Gaming

Programming

React-Transition-Group