Updating child state from parent component
4 answers
Hopefully you can get the basic idea - create a function in the parent component that will change the value passed to Child1. ReactJS: Why is the initial state of the prop-anti-pattern being passed?
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>
)
}
}
+5
source to share
You can have a function in a child component that updates the state based on the value posted from the parent component. And you can access the function of the child component from the parent component usingrefs
Example
Parent:
class Parent extends React.Component {
funcUpdateChild1 = () => {
this.child1.updateState('value here');
}
render() {
return (
<Child1 ref={(ip) => {this.child1 = ip}} />
<Child2 ref={(ip) => {this.child2 = ip}} />
)
}
}
Child1
class Child1 extends React.Component {
updateState = (value) => {
//use the value to set state here
}
render() {
return (
//child1 contents here
)
}
}
0
source to share
Child {
constructor (props){
super(props)
this.state = {
data: this.props.data
}
}
render (){
if (this.props.data != this.state.data){
this.setState({data : this.props.data}) //update data from parent if they are different
}
return (
<Text>{this.state.data}</Text>
)
}
}
Parent {
constructor (props){
super(props)
this.state = {
data: 'new string'
}
}
render (){
return (
<Child
data = {this.state.data}/>
)
}
}
Hope it helps
0
source to share
** Composite component **
import React from 'react';
import MM from './modall';
class App extends React.Component {
constructor() {
super();
this.state = {
naslov:'',
telo:''
};
this.setStateHandler = this.setStateHandler.bind(this);
this.postaviStanje = this.postaviStanje.bind(this);
this.Stanje = this.Stanje.bind(this);
}
setStateHandler() {
this.setState({ naslov: "Naslov Prvi u Modalu", telo:"Novo Prvo telo modala"});
};
postaviStanje(){
this.setState({naslov: " Novi drugi u Modalu", telo:"Novo drugo telo modala"});
};
Stanje(){
this.setState({naslov: " Novi treci u Modalu", telo:"Novo trece telo modala"});
};
render() {
return (
<div>
<button onClick = {this.setStateHandler} data-toggle="modal" data-target="#modal">SET STATE</button>
<button onClick = {this.postaviStanje} data-toggle="modal" data-target="#modal">SET STATE2</button>
<button onClick = {this.Stanje} data-toggle="modal" data-target="#modal">SET STATE3</button>
<MM telo={this.state.telo} naslov={this.state.naslov} />)
</div>
);
}
}
export default App;
Compnent child
/**
* Created by trika on 31-Jan-18.
*/
import React,{Component} from 'react';
class Modal extends Component{
constructor(props) {
super(props);
this.state = {
naslov:this.props.naslov,
telo: this.props.telo
};
}
render(){
return(
<div className="modal" id="modal" role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title"><strong>{this.props.naslov}</strong></h1>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<p>Modal body text goes here.</p>
<h2><strong>{this.props.telo}</strong></h2>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-primary">Save changes</button>
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
);
}
}
export default Modal;
0
source to share