Updating child's state from parent component
javascript, reactjs
Solution
Hope you can get the main idea - create a function in the Parent component that will change the value passed to the Child1. ReactJS: Why is passing the component initial state a prop an anti-pattern?
class Parent extends Component {
constructor(props){
super(props);
this.state = {
value: ""
}
}
changeValue(value){
this.setState({value});
}
render(){
return (
<div>
<Child1 value={this.state.value}/>
<Child2 changeValue={changeValue}/>
</div>
)
}
}
class Child2 extends Component {
constructor(props) {
super(props);
this.state={
input: ""
}
}
handleChange(e){
var {value} = e.target;
this.setState({
input: value
},() => this.props.changeValue(value));
}
render(){
return (
<div>
<input value={this.state.input} onChange={this.handleChange}/>
</div>
)
}
}
class Child1 extends Component {
constructor(props) {
super(props);
this.state={value:''}
}
componentWillReceiveProps(nextProps) {
this.setState({value: nextProps.value})
}
render(){
return (
<div>
{this.props.value}
</div>
)
}
}
Problem
Let's say that my parent component got two child component : ``` Parent | Child1 | Child2 ``` I'am getting an input from Child2 and I'am passing it to the Parent component (until now, I know how to do). But then I need to pass that input to Child1 to update it's state. How can I do that?