Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode

Question

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>     )    } } 

Answer 1

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.