Reputation: 258
"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
Upvotes: 5
Views: 3067
Reputation: 386
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.
Upvotes: 8
Reputation: 1
For anyone using class-based components, it's recommended to use createRef
instead.
Example:
const nodeRef = React.createRef(null);
I was having the same issue, and also as @warkentien2 said, you also need to add the reference in the child component, otherwise nothing happens.
Upvotes: 0