How to use TransitionGroup's childFactory prop and avoid `findDOMNode is deprecated` error

[qramilq]

I'm trying to use different animations with childFactory from this message.

What is the current behavior?

When I try to animate I get an error (warning) in console, that says "Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode...."

What is the expected behavior?

No errors when animate

Could you provide a CodeSandbox demo reproducing the bug?

CodeSandbox

[zzjin]

same issue here.

[aderchox]

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node at div at Transition at CSSTransition at App

[Stunext]

Same issue here! Is there any plan to solve this problem in a future version?

[snoozemo]

+1

[Tonysmark]

+1

[Tonysmark]

+1

currently using version 4.4.5

[groop-moray]

+1, 4.4.5

[mikyYun]

Hi, I just solved by revmoe "StrictMode" from </React.StrickMode> to

I tried React.createRef and useRef to give ref to Transition or children components, but didn't solve problem. My project does not really necessary the strickMode, so I removed it and worked.

[cody-ta]

Hi, I just solved by revmoe "StrictMode" from </React.StrickMode> to

I tried React.createRef and useRef to give ref to Transition or children components, but didn't solve problem. My project does not really necessary the strickMode, so I removed it and worked.

The error is only shown in StrictMode, so your "solution" is like clearing console.

[mikyYun]

Right... was stupid, When I give nodeRef=React.useRef() to CSSTransition as a prop, the error is gone but the children do not animate. If I figure it out, will come back

[mikyYun]

does your code not break the animation? my attempted codes are here, when I added nodeRef to CSSTransition, all animations were broken `<TransitionGroup className="transition_group" childFactory={childFactory(direction)}

<CSSTransition classNames={direction} timeout={{ enter: 500, exit: 500 }} key={currentProject} // nodeRef={ref}

{projectsContainer(currentProject)}

`

[b5414]

same

[brokuka]

up

[denchiklut]

Hi everyone I had the same problem with react-transition-group but I think I found solution. The problem was that according to there documentation when you specify nodeRef prop, handlers will work a bit differently. You wont receive node in handlers callback as an argument as it was previously. instead you would have to manually specify node you are animating.

For example: See this code. Basically what I did I store the ref to the node. And then use this ref in all handlers.

I Hope it will help you.

[silvenon]

To close this, this is how I would rewrite your component:

const STEPS = [
  { name: "first step", nodeRef: createRef(null) },
  { name: "second step", nodeRef: createRef(null) },
  { name: "third step", nodeRef: createRef(null) },
  { name: "fourth step", nodeRef: createRef(null) }
];

export default function App() {
  const [currentStep, setCurrentStep] = useState(0);
  const isNext = useRef(false);
  const { name: step, nodeRef } = STEPS[currentStep] ?? {};

  return (
    <div className="App">
      {currentStep > 0 ? (
        <button onClick={() => setCurrentStep(currentStep - 1)}>Prev</button>
      ) : null}
      {currentStep < STEPS.length - 1 ? (
        <button onClick={() => setCurrentStep(currentStep + 1)}>Next</button>
      ) : null}

      <TransitionGroup
        childFactory={(child) => {
          return cloneElement(child, {
            classNames: isNext.current ? "right-to-left" : "left-to-right",
            timeout: 500
          });
        }}
      >
        <CSSTransition
          timeout={500}
          classNames="right-to-left"
          key={step}
          nodeRef={nodeRef}
        >
          <h1 ref={nodeRef} className="step">
            {step}
          </h1>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
}

• create a ref object for each step, and pass it as nodeRef to CSSTransition and as ref to h1
• hide previous or next button if there is no previous or next step to go to

No warnings for me. Let me know if you have any questions.

[vukadinFE]

+1

[silvenon]

I'm locking this to avoid more "+1"s. If https://github.com/reactjs/react-transition-group/issues/820#issuecomment-1248508631 doesn't help you resolve your particular use case, please open a new issue.