passing values from child to parent react components code example
Example 1: pass data from child component to parent component react native
class Parent extends React.Component {
state = { message: "" }
callbackFunction = (childData) => {
this.setState({message: childData})
},
render() {
return (
<div>
<Child1 parentCallback = {this.callbackFunction}/>
<p> {this.state.message} </p>
</div>
);
}
}
class Child1 extends React.Component{
sendData = () => {
this.props.parentCallback("Hey Popsie, How’s it going?");
},
render() {
}
};
Example 2: how to pass props from child to parent
class ToDoList extends React.Component { constructor(props) { super(props); this.state = { listDataFromChild: null }; }, myCallback = (dataFromChild) => { this.setState({ listDataFromChild: dataFromChild }); }, otherFn = () => { [...within this other function now I still have access to this.state.listDataFromChild...] } render() { return ( <div> <ToDoItem callbackFromParent={this.myCallback}/> [...now here I can pass this.state.listDataFromChild as a prop to any other child component...] </div> ); }});