the child component clicks the button to change its state to trigger the render update, but does not change the state state of the parent component, so how does the parent component sense that the child component has been re-render?
parent component code
import React from "react";
import TodoItem from "./TodoItem.js";
class TodoList extends React.Component{
constructor(){
super();
}
render(){
return (
<div>
<TodoItem/>
</div>
)
}
}
export default TodoList;subcomponents
import React from "react";
class TodoItem extends React.Component{
constructor(){
super();
this.state = {
greet:"hi"
}
this.handlerChange = this.handlerChange.bind(this);
}
render(){
return (
<div>
<div>{this.state.greet}</div>
<button onClick={this.handlerChange}>state</button>
</div>
)
}
handlerChange(){
this.setState(()=>{
return{
greet:"hello"
}
})
}
}
export default TodoItem;