"react": "^16.13.1" "react-transition-group": "^4.3.0"
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
Hi, everyone.
I faced with findDOMNode warning and can't find the right solution on the internet.
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode...
This example I copied from off docs here and on click of the button, the same error appears.
const Toolbar = (props) => {
const [inProp, setInProp] = useState(false);
return (
<div>
<CSSTransition in={inProp} timeout={200} classNames="my-node">
<div>
{"I'll receive my-node-* classes"}
</div>
</CSSTransition>
<button type="button" onClick={() => setInProp(true)}>
Click to Enter
</button>
</div>
)
};
The solutions from the internet suggested trying createRef (I used usePef hook) but with Transitions, it didn't work.
It seems that React.StrictMode will throw a warning like this until the patch for this library will be merged, but still, I don't see the created issue
I will be grateful for any help or proposal of how to solve the issue
They fixed that bug from version 4.4.0.
To fix that can pass nodeRef
to CSSTransition
const Toolbar = (props) => {
const [inProp, setInProp] = useState(false);
const nodeRef = useRef(null)
return (
<div>
<CSSTransition in={inProp} nodeRef={nodeRef} timeout={200} classNames="my-node">
<div ref={nodeRef}>
{"I'll receive my-node-* classes"}
</div>
</CSSTransition>
<button type="button" onClick={() => setInProp(true)}>
Click to Enter
</button>
</div>
)
};
I hope that will be helpful.