React-Transition-Group: findDOMNode is deprecated in StrictMode

Question

I am using the animation library react-transition-group in react for animating a TODO list using <TransitionGroup> and <CSSTransition> as shown below

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) => (
      <CSSTransition key={task.id} timeout={500} classNames={styles}>
         <li key={task.id}>
            <TodoTask
               todo={task}
               onClick={(todo) =>
            toggleTodo({ data: todo })}
            />
         </li>
      </CSSTransition>
      ))}
   </TransitionGroup>
</ul>

But I am getting the error in the console as below:

I read about using nodeRef={nodeRef} on the CSSTransition element mentioned in this official changelog and git issue as shown below but then it started behaving weird i.e. some of the elements are not appearing properly in UI as shown in the screenshot below code snippets:

const nodeRef = React.useRef(null)

and

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) => (
      <CSSTransition
         key={task.id}
         timeout={500}
         classNames={styles}
         nodeRef={nodeRef}
         >
         <li key={task.id} ref={nodeRef}>
            <TodoTask
               todo={task}
               onClick={(todo) =>
            toggleTodo({ data: todo })}
            />
         </li>
      </CSSTransition>
      ))}
   </TransitionGroup>
</ul>

This screenshot is taken after applying nodeRef in CSSTransition

Answer 1

You need to make a separate ref for each of the CSSTransitions. The easiest way to do that is to make a custom component:

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) =>
        <TransitionTodo key={task.id} todo={task}/>}
  </TransitionGroup>
</ul>

function TransitionTodo({todo}) {
  nodeRef = useRef();
  return (
    <CSSTransition
       timeout={500}
       classNames={styles}
       nodeRef={nodeRef}
     >
       <li ref={nodeRef}>
          <TodoTask
             todo={todo}
             onClick={(todo) =>
               toggleTodo({ data: todo })}
          />
       </li>
    </CSSTransition>
  );
}