Passing Data Between React Components
Tags: beginners, props, react, fundamentals
Published: 2022-02-07 01:39:02

## 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.