title: Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
body: <p>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.</p>
  <blockquote>
  <p>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</p>
  </blockquote>
  <p>This is my code</p>
  <pre><code>class Todo extends Component {
    state = {
      show: false,
      editTodo: {
        id: &quot;&quot;,
        title: &quot;&quot;,
        isCompleted: false
      }
    }
    handleClose = () =&gt; {
      this.setState({ show: false })
    }
    handleShow = () =&gt; {
      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) =&gt; {
      this.setState({ title: event.target.value })
      console.log(this.state.editTodo.title);
    }
  
    render () {
      //destructuring
      const { id, title } = this.props.todo;
      return (
        &lt;div style={this.getStyle()}&gt;
          &lt;p&gt;
            &lt;input type='checkbox' style={{ margin: &quot;0px 20px&quot; }} onChange={this.props.markComplete.bind(this, id)} /&gt; {''}
            {title}
            &lt;Button style={{ float: &quot;right&quot;, margin: &quot;0px 10px&quot; }} variant=&quot;warning&quot; size={&quot;sm&quot;} onClick={this.handleShow}&gt;Edit&lt;/Button&gt;{' '}
            &lt;Button style={{ float: &quot;right&quot; }} variant=&quot;danger&quot; size={&quot;sm&quot;} onClick={this.props.DelItem.bind(this, id)}&gt;Delete&lt;/Button&gt;
          &lt;/p&gt;
          &lt;Modal show={this.state.show} onHide={this.handleClose}&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Edit your Task!&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body &gt;
              &lt;FormGroup &gt;
                &lt;Form.Control
                  type=&quot;text&quot;
                  value={this.state.editTodo.title}
                  onChange={this.handleChange}
                /&gt;
              &lt;/FormGroup&gt;
            &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button variant=&quot;secondary&quot; onClick={this.handleClose}&gt;
                Close
                            &lt;/Button&gt;
              &lt;Button variant=&quot;primary&quot; onClick={this.handleClose}&gt;
                Save Changes
                            &lt;/Button&gt;
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      )
  
    }
  }
  </code></pre>