Will throw a warning in StrictMode:<\/strong><\/p>\n Warning: findDOMNode is deprecated in StrictMode.<\/strong><\/p>\n Functional Component (with useRef)<\/strong><\/p>\n Class Component (with createRef)<\/strong><\/p>\n If you’re using a library (e.g., Material-UI, React Transition Group) that internally uses findDOMNode, you can usually:<\/p>\n You are updating title directly on the component\u2019s state, but the state only contains<\/strong> editTodo, not a top-level title field. That\u2019s why your function seems \u201cnot working\u201d \u2014 you\u2019re updating the wrong part of the state.<\/p>\n Since editTodo is part of the state, and title is a nested property inside it, you need to update it like this:<\/p>\n This properly updates editTodo.title in the state, and now value={this.state.editTodo.title} will reflect what you type.<\/p>\n 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:<\/p>\n This error could occur if you’re accidentally using a function where JSX is expected, for example:<\/p>\n This returns void and is invalid.<\/p>\n Instead:<\/p>\nRecommended Alternatives<\/h2>\n
1. Use ref Instead (Functional or Class Components)<\/h3>\n
\r\nimport { useRef, useEffect } from 'react';\r\nfunction MyComponent() {\r\n const divRef = useRef\r\nclass MyComponent extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myRef = React.createRef();\r\n }\r\n componentDidMount() {\r\n if (this.myRef.current) {\r\n this.myRef.current.focus(); \/\/ or do something else\r\n }\r\n }\r\n render() {\r\n return 2. For 3rd-party Libraries Using findDOMNode<\/h3>\n
\n
Why Avoid findDOMNode?<\/h3>\n
\n
Correct Approach<\/h2>\n
Fix handleChange method:<\/h3>\n
\r\nhandleChange = (event) => {\r\n this.setState(prevState => ({\r\n editTodo: {\r\n ...prevState.editTodo,\r\n title: event.target.value\r\n }\r\n }));\r\n}\r\n<\/pre>\nBonus: Initialize editTodo from Props When Editing<\/h2>\n
Update handleShow:<\/h3>\n
\r\nhandleShow = () => {\r\n const { id, title, isCompleted } = this.props.todo;\r\n this.setState({\r\n show: true,\r\n editTodo: { id, title, isCompleted }\r\n });\r\n}\r\n<\/pre>\nSummary of Fixes<\/h2>\n
\n
Console Warning: “Type ‘void’ is not assignable to type ‘ReactNode'”<\/h2>\n
<p>{this.props.handleDelete(id)}<\/p>> \/\/ \u274c BAD<\/pre>\n<p onClick={() => this.props.handleDelete(id)}>Delete<\/p> \/\/ \u2705 GOOD<\/pre>\n
![\"Also](\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\")