Passing data React

Passing from Parent to Child

For this, you will use Props, while having access to data in the parent component that the child component needs access to you can pass the data as a prop.

Passing from Child to Parent

For this, you will use Callbacks, which is a little more difficult and not as straightforward as using props. To use callbacks we can use these steps…

  1. Define the callback in the parent component which will take the data needed as a parameter.
  2. Pass that callback as a prop to the child.
  3. Call that callback using this.props.[name used for callback] in the child, and then you will pass the data as the argument.

Passing from Siblings

To pass from two sibling components you will combine using props and callbacks. To do this you will be using the parent component as an intermediary. You can use these steps…

  1. Pass the data from the child to the parent, as an argument into a callback from the parent.
  2. Use the incoming parameter and set it as a state on the parent component.
  3. Pass the state as a prop to the other child component which will be the sibling of the first component.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store