findDOMNode is Deprecated in StrictMode

Problem

Using ReactDOM.findDOMNode() like this:

const node = ReactDOM.findDOMNode(this);

Will throw a warning in StrictMode:

Warning: findDOMNode is deprecated in StrictMode.

Recommended Alternatives

1. Use ref Instead (Functional or Class Components)

Functional Component (with useRef)

import { useRef, useEffect } from 'react';
function MyComponent() {
  const divRef = useRef(null);
  useEffect(() => {
    if (divRef.current) {
      divRef.current.focus(); // example usage
    }
  }, []);
  return 
Hello
;
}

Class Component (with createRef)

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    if (this.myRef.current) {
      this.myRef.current.focus(); // or do something else
    }
  }
  render() {
    return 
Hello
;
  }
}

2. For 3rd-party Libraries Using findDOMNode

If you’re using a library (e.g., Material-UI, React Transition Group) that internally uses findDOMNode, you can usually:

• Use ref-forwarding versions of components
• Avoid wrapping the component in StrictMode (not ideal long-term)
• Update the library if newer versions support ref properly

Why Avoid findDOMNode?

• Breaks encapsulation: can access DOM of other components
• Not compatible with React’s future architecture (like concurrent mode)
• Often a sign of an anti-pattern in component design

You are updating title directly on the component’s state, but the state only contains editTodo, not a top-level title field. That’s why your function seems “not working” — you’re updating the wrong part of the state.

Correct Approach

Since editTodo is part of the state, and title is a nested property inside it, you need to update it like this:

Fix handleChange method:

handleChange = (event) => {
  this.setState(prevState => ({
    editTodo: {
      ...prevState.editTodo,
      title: event.target.value
    }
  }));
}

This properly updates editTodo.title in the state, and now value={this.state.editTodo.title} will reflect what you type.

Bonus: Initialize editTodo from Props When Editing

Right now, editTodo.title is initially “”. So the edit field is empty when you open the modal. You may want to set it from props when handleShow is called:

Update handleShow:

handleShow = () => {
  const { id, title, isCompleted } = this.props.todo;
  this.setState({
    show: true,
    editTodo: { id, title, isCompleted }
  });
}

Summary of Fixes

• Update handleChange to modify editTodo.title, not title at the top level.
• Populate editTodo when opening the modal using this.props.todo.

Console Warning: “Type ‘void’ is not assignable to type ‘ReactNode'”

This error could occur if you’re accidentally using a function where JSX is expected, for example:

<p>{this.props.handleDelete(id)}</p>> // ❌ BAD

This returns void and is invalid.

Instead:

<p onClick={() => this.props.handleDelete(id)}>Delete</p> // ✅ GOOD

Also Read:

Flash Messages in NodeJS