Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
JavascriptReactjsReact ComponentReact StateStrict ModeJavascript Problem Overview
I am trying to use a function as a prop inside a component and this component is a child of another component. But the function is not working.? Can I know why. This is the warning i am receiving in the console.
> 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
This is my code
class Todo extends Component {
state = {
show: false,
editTodo: {
id: "",
title: "",
isCompleted: false
}
}
handleClose = () => {
this.setState({ show: false })
}
handleShow = () => {
this.setState({ show: true })
}
getStyle () {
return {
background: '#f4f4f4',
padding: '10px',
borderBottom: '1px #ccc dotted',
textDecoration: this.props.todo.isCompleted ? 'line-through'
: 'none'
}
}
//this method checks for changes in the edit field
handleChange = (event) => {
this.setState({ title: event.target.value })
console.log(this.state.editTodo.title);
}
render () {
//destructuring
const { id, title } = this.props.todo;
return (
<div style={this.getStyle()}>
<p>
<input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''}
{title}
<Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '}
<Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button>
</p>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit your Task!</Modal.Title>
</Modal.Header>
<Modal.Body >
<FormGroup >
<Form.Control
type="text"
value={this.state.editTodo.title}
onChange={this.handleChange}
/>
</FormGroup>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
<Button variant="primary" onClick={this.handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
Javascript Solutions
Solution 1 - Javascript
In index.js change <React.StrictMode><App /><React.StrictMode> to <App /> and you will not see this warning. Please note that strict mode helps you with
- Identifying components with unsafe lifecycles
- Warning about legacy string ref API usage
- Warning about deprecated findDOMNode usage
- Detecting unexpected side effects
- Detecting legacy context API
Please refer to https://reactjs.org/docs/strict-mode.html before removing it.
Solution 2 - Javascript
If you're using a Modal or Carousel from react-bootstrap a workaround is disabling the animations. Turning them off makes the warning disappear.
For Modals:
<Modal animation={false}>
<Modal.Header closeButton>
<Modal.Title>Title</Modal.Title>
</Modal.Header>
<Modal.Body>
Content
</Modal.Body>
</Modal>
For Carousels:
<Carousel slide={false} fade={false}>
<Carousel.Item>
Scene 1
</Carousel.Item>
<Carousel.Item>
Scene 2
</Carousel.Item>
</Carousel>
I know it'd fit better as a comment once it doesn't answer the OP question, but I don't have a reputation enough to do so and maybe it helps someone.
Solution 3 - Javascript
The response of @Ross Allen is not related to the basic problem (the warning), it resolved a syntax problem in the code.
The response of @Ali Rehman is more related to the warning, but also it not resolving correctly the problem, it only hides the problem so that the warning does not appear no more.. Why not if we don't care about deprecations !!
Yes, the problem is comming from the React.StrictMode:
<React.StrictMode>
<App />
</React.StrictMode>
StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants, such as:
- Identifying components with unsafe lifecycles
- Warning about legacy string ref API usage
- Warning about deprecated findDOMNode usage
- Detecting unexpected side effects
- Detecting legacy context API
As the error backtrace is not fully given in the question, I guess the problem is related to a Warning about deprecated findDOMNode usage, because of referencing to elements in the render methods:
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit your Task!</Modal.Title>
</Modal.Header>
<Modal.Body >
<FormGroup >
<Form.Control
type="text"
value={this.state.editTodo.title}
onChange={this.handleChange}
/>
</FormGroup>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
<Button variant="primary" onClick={this.handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
When the component is rendered, so the modal has been also rendered, and we try to change states of the component, the component (and so the modal) will re-render, and in this stage the modal can not have access to the states.
The solution to resolve the warning is by using React refs. Refs helps to access DOM nodes or React elements created in the render method.
Solution 4 - Javascript
The setState call looks like it's being written to the wrong place. Make sure it's on the editTodo object:
handleChange = (event) => {
this.setState(state => ({
editTodo: {
...state.editTodo,
title: event.target.value,
},
}));
}
Solution 5 - Javascript
I'm not sure if it's helping when using the material-ui library but in many cases this can help:
const nodeRef = React.useRef(null);
return <div>
<CSSTransition ... nodeRef={nodeRef}>
<div ref={nodeRef}> ... </div>
</CSSTransition>
</div>
Solution 6 - Javascript
In Semantic UI React, this is a known issue, most of their components are still using findDOMNode(). This will be fixed in the Semantic UI React v3 where all these components will be updated to use React.forwardRef().
At first I thought I was doing something wrong and spent quite some time investigating, only to find it was a known issue.
Solution 7 - Javascript
This is an issue of MaterialUI library, and there's a temporary solution here before the new MaterialUI v5 is officially released
Solution 8 - Javascript
I have seen this error before ,when i used react-bootstrap and react-router-dom along side each other . i replaced
<Link to="/foo">sth</Link>
with
<LinkContainer to="/foo/bar">
<Button>Foo</Button>
</LinkContainer>
and there is no need to use Link for NavLink
Solution 9 - Javascript
The simplest solution to this type of scenario is to wrap your component with a DOM element that you can actually attach a ref to it. For example:
import React, { createRef, Component } from "react";
import ChildComponent from "./child-component";
class MyComponent extends Component {
componentDidMount() {
const node = this.wrapper.current;
/* Uses DOM node */
}
wrapper = createRef();
render () {
return (
<div ref={this.wrapper}>
<ChildComponent>{this.props.children}</ChildComponent>
</div>
);
}
}
export default MyComponent;`
Solution 10 - Javascript
A similar issue: Below solved the problem:
In the ReactDOM.render() function, change
from
<React.StrictMode>
<SnackbarProvider>
<App/>
</SnackbarProvider>
</React.StrictMode>
to
<SnackbarProvider>
<React.StrictMode>
<App/>
</React.StrictMode>
</SnackbarProvider>
NOTE: SnackbarProvider & React.StrictMode tags are reversed.
Solution 11 - Javascript
I think this issue is not an error, but is a deprecation warning. the library component still works, but uses a feature that will no longer be available in future releases. so the library must be updated to use another function to replace the old one.
Solution 12 - Javascript
To fix this issue just remove React.StrictMode from index.js where you access the dom root id, that will fix it.
Instead of this:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Use this line:
ReactDOM.render(<App />,document.getElementById('root'));