Passing Data Between React Components

Introduction

A question I found myself googling often when I started learning how to use React, was how do I pass information from a child component to its parent component? To be able to do so, you have to first understand how to pass data from the parent component to the child. I will demonstrate how to accomplish both of these tasks with a quick tutorial.

Passing data down from parent component to child component

Data is passed down in the form of props (properties). I often found myself having to pass the data my state was saving in the parent component to the child component. Let's use a simple function component with state as an example:

import React from 'react';
import Child from './Child.js';

function Parent() {

  const [name, setName] = useState('')

  function greeting(){
    setName('Michael')
  }

  return (
    <>
      <Child parentData = {name}/>
      <Button onClick={() => greeting()}>Click Here</Button>
    </>
  );
}

export default Parent;

Child must be imported into the Parent component in order for it to be rendered.
All that is happening here is greeting() is being called upon the onClick action on our button element. The greeting() function calls setName('Michael'), storing string Michael in state.

We then can pass that string as props down to the Child component being rendered by the Parent. You can name your props whatever you want. Here, I named them parentData and assigned them the data held in state, with name.

<Child parentData = {name}/>

The Child component now has access to the props stored in state in the parent component. Let's see how that might look in the Child component:

import React from 'react';

function Child({parentData}) {
  return (
    <>
      {parentData}
    </>
  );
}

export default Child;

Here, the props named parentData from the Parent component are being received by the functional component, Child. It can do whatever it wants with that data, in this case render the string 'Michael' on the screen when the button is clicked.

Now that we know how to pass data from a parent component to a child component, we can see how to pass data in the opposite direction, from child component to parent component.

Passing data up from child component to parent component

Passing data in the other direction is a little more complicated. A common situation where you will have to do this, is when you are wanting to change the data stored in state in a parent component from its child component. In order to accomplish this, you have to pass a callback function down to the child component in the form of props.

We'll use a similar example as above for demonstration:

import React from 'react';
import Child from './Child.js'

function Parent() {

  const [name, setName] = useState('')

  function callBack(childName){
    setName(childName)
  }

  return (
    <>
      <Child callBack = {callBack} />
      {name}
    </>
  );
}

export default Parent;

Notice how the function callBack is passed to Child as props with
<Child callBack = {callBack} />
The childName parameter received by callBack is actually being passed up from the Child component, let's take a look:

import React from 'react';

function Child({callBack}) {

  const childName = 'Dave'

  return (
    <div>
      <button onClick={() => callBack(childName)}>Click Child</button>
    </div>
  );
}

export default Child;

Child receives the callBack function in its parameters. It holds the childName variable with a string of 'Dave'. Upon the click action on our button, the callBack function is called passing into it the childName data. This data is seen in the Parent component, and is used to change state:

#in the Parent component

function callBack(childName){
    setName(childName)
  }

The new state data is then rendered by the Parent component.

Conclusion

There you have it! That's about as simple as it gets when it comes to passing data from parent components to child components, and vice versa. Knowing how to perform these methods is an important tool to have under your belt, as they are crucial to the usage of React.