Passing data React

Passing data between components is a big part of using react. In this article, we look at how to pass those components using props and callbacks. You are probably thinking to yourself what are these things, if you already know the answer to that question no reason to keep reading this article. If you don’t know what they are, they are used to pass data between components from a parent component to a child component(props) or a child to a parent (callback). Now you might ask yourself how would you pass from sibling components, we will cover that as well.

Passing from Parent to Child

Passing from Child to Parent

  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

  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.

After using those steps the sibling component will be able to access the data as a prop.

Passing data can be a bit tricky, but with practice and these tools, you can learn to master it and become a react pro.

--

--

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