React state asynchrous in render - reactjs

Question

I have small asynchronous problems with render method.
I init my state variable textInRenameTodoPopOverInput with a props variable.
The problem is that when my props variable is changed, the state variable always remains at the initially given value (for this example it will be 'dummyText') so that when the value of my props this.props.todoToRename.text changes, the console always returns :
>> Props in Modal {this.props.todoToRename.text} // Here the props has the expected new value
>> State in modal dummyText // But the state is not refresh and keep 'dummyText'
here is my code that I simplified :
import React from "react";
export default class RenameTodoPopOver extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
textInRenameTodoPopOverInput: this.props.todoToRename.text,
}
}
handleChange = (event) => {
this.setState({ textInRenameTodoPopOverInput: event.target.value });
}
render() {
console.log('Props in Modal ' + this.props.todoToRename.text);
console.log('State in modal ' + this.state.textInRenameTodoPopOverInput);
return (
<input type="text" defaultValue={this.state.textInRenameTodoPopOverInput} onChange={this.handleChange} />
);
}
}
Do you have any idea what my mistake is or how i can resolve this problem ?

Answer 1

You should use getDerivedStateFromProps to update the component state based op props.
export default class RenameTodoPopOver extends React.Component {
state = { textInRenameTodoPopOverInput: '' }
static getDerivedStateFromProps(nextProps){
if(nextProps.todoToRename.text){
return {
textInRenameTodoPopOverInput: nextProps.todoToRename.text
}
}
}
handleChange = (event) => {
this.setState({ textInRenameTodoPopOverInput: event.target.value });
}
render() {
console.log('Props in Modal ' + this.props.todoToRename.text);
console.log('State in modal ' + this.state.textInRenameTodoPopOverInput);
return (
<input type="text" defaultValue={this.state.textInRenameTodoPopOverInput} onChange={this.handleChange} />
);
}
}

Answer 2

some problems with your code:
1. you are using the props and assigning it to the state which is bad.
2. you can shift the "state" to the parent component and let the parent component send the text and handle function as props
//in the parent component
import React from "react";
export default class ParentRenameTodoPopOver extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
textInRenameTodoPopOverInput: this.props.todoToRename.text,
}
}
handleChange = (event) => {
this.setState({ textInRenameTodoPopOverInput: event.target.value });
}
render() {
return (
<RenameTodoPopOver
textInRenameTodoPopOverInput=
{this.state.textInRenameTodoPopOverInput}
handleChange = {this.handleChange}
/>
);
}
}
export default ParentRenameTodoPopOver
now in the child component get the state and handle from the parent as props and work on it.
//in the child component
import React from "react";
const RenameTodoPopOver = (props)=>
return (
<input
type="text"
defaultValue={props.textInRenameTodoPopOverInput}
onChange={props.handleChange} />
)
}
export default RenameTodoPopOver;
while designing components in react, it is easier to write if we divide the components into purely funtional and purely presentational components. Here the parent component is purely functional i.e., it has all the logic on the other hand, the child component is purely functional, it has not logic and it gets all functions and state passed to it from the parent by props.