child > parent

And the moment what you waited.passing props from child to parent,actually props are design to pass data from parent to child but you can,Child to parent by using callbacks(functions).

Note: there maybe other methods also to do this but according me this is better…

The basic purpose of using props is to get data from another component using its component.take a look at below diagram ⬇️

will understand how we use props to pass data between component to component.imagine: you have two component Comp-A and Comp-B,and you need some data for Comp-A which the data is stored in Comp-A,to get the data from Comp-A for Comp B we use props

And now how you get the data? to get the data you should defined the component(which receives the data) inside the component(which sends the data).

In our case you should defined the Comp-B inside the Comp-A (i show this using arrow to Comp-B to Comp-A) to receive the data from Comp-A to Comp-B as props ,you can do this other way around too…

summary: to receive a data from component you should defined the receiver component inside the sender component

class Child extends React.Component { printName = () => {

this.props.callBack('Chawki')

}



render() {

return (

<div>

<button onClick={this.printName}>

Click Here

</button>

</div>

);

}

} class Parent extends React.Component { state = {

myName: '',

}



callBack = (name) => {

this.setState({

myName: name

})

}; render() {

return (

<div>

<Child callBack={this.callBack}/>

<h2>My Name: {this.state.myName}</h2>

</div>

);

}

}

Note: for functional based component we assign props as props.value(pass props as parameter) for class based components we assign props as this.props.value

Yeah i know the code is little mess,but i will give my best explanation to show how to pass props from parent to child

What happen in the code: There is a parent component and child component,parent component receives props from child.

How parent receives the props from child? here is the main difference between parent > child and child > parent how they receive props.

In parent > child communication when parent component renders in DOM child too wants to render because child is inside the parent | when child tag comes to render | the child tag calls child component with passed props to render then the component receives the props and renders successfully | thats what happen ,read again and look at the code above if you don’t understand.

In child > parent communication

when parent component renders in DOM child too wants to render because child is inside the parent when child tag comes to render its receive a callback(callBack) function which defined inside the child tag,for child component. Inside the child component its receives the callback with a method(onClick), when the onClick method clicked and executed its calls a another callback(printName) when printName executed its calls our main callback function(callBack) with the parameter value of chawki .as : “this.props.callBack(‘chawki’)” when the callBack function called it sets the name state to passed props(chawki) from child component.

This might be callback hell,whatever we break the rule and pass props from child to parent.you can the change the above code for your use case.

Recommend to read this book 👆 Author

Request to Join @ MERN(MongoDB,Express.js,React.js,Node.js) community Spectrum & Reddit

A free React.js Handbook