A demo app to understand flow of data in react.
React has one way of data flow, but sometimes it needs to be able to move from child to parent, parent to child or among children components.
- Index
- ProductList
- InputBrand
- Product
- Total
- ProductList
If parent have data then it can pass it down to its children via props.
[photo here]
and in the child, those passed props can be accessed by
this.props.passedDownIdentifier
Props are immutable in child components.
If child have data which parent needs to have access to then it is done via callback
- Constuct the method in the parent with the parameters which you will recieve from the child.
callbackMethodInParent = (dataFromChild) => {
// foo bar
};
- Pass the constructed callback method to the child as props.
<ChildComponent callbackMethodInParent = {this.callbackMethodInParent} />
- In the child call the callback with the data you recieved.
this.props.callbackMethodInParent(newData);
[combined image with number tags]