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

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

  }
}

Solution 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.

Solution 2:

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.

EDIT: This was fixed on v2 alpha

Solution 3:

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.