React Send Data from Child to Parent Component Tutorial

If you're working with React, you've probably run into the need to pass data from a child component to a parent component. It can be a bit tricky at first, but with this tutorial, you'll learn how to do it simply and effectively.

Understanding React Component Hierarchy

Before we dive into passing data from child to parent components, it's important to understand the React component hierarchy. In React, components can have parent and child components, forming a tree-like structure.

The parent component can pass data down to its child components through props, which are essentially parameters passed between components. The child component can also communicate with the parent component, but it requires a bit more effort.

The Problem: How to Send Data from Child to Parent Component

Imagine you have a parent component that contains several child components. One of these child components has a form that the user fills out, and you want to capture that data in the parent component.

So, how can you get this data from the child component to the parent component? This is where things get a bit more complex. Child components in React are supposed to be "dumb", meaning they shouldn't have to know about their parent components. However, we still need a way for the child component to communicate with the parent component in order to send the data.

The Solution: Use Callback Functions

The solution to this problem is to use callback functions. Callback functions are functions that are passed as props from the parent component to the child component, and are called by the child component when the data needs to be sent.

Here's how it works in practice:

1. In the parent component, define a function that will receive the data from the child component. For example, we might define a function like this:

function handleFormData(formData) {
  console.log(formData);
}

1. We pass this function down to the child component as a prop:

<ChildComponent onFormData={handleFormData} />

1. In the child component, we define a function that will be called when the user submits the form. This function will then call the callback function that was passed down as a prop:

function handleSubmit(event) {
  event.preventDefault();
  const formData = { /* grab data from form */ }
  props.onFormData(formData);
}

That's it! When the user submits the form in the child component, the handleSubmit function is called, which then calls the handleFormData function passed down as a prop from the parent component.

Demo: Passing Data from Child to Parent Component

Let's put this all together in a demo. We'll create a simple form in a child component, and send the form data to a parent component when it's submitted.

Step 1: Create the Parent Component

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  function handleFormData(formData) {
    console.log(formData);
  }

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent onFormData={handleFormData} />
    </div>
  );
}

export default ParentComponent;

Here, we define the ParentComponent function that contains a handleFormData function that we'll use to receive data from the child component. We also import the ChildComponent we'll create in the next step.

We then render some basic markup, and pass the handleFormData function to the ChildComponent as a prop.

Step 2: Create the Child Component

import React, { useState } from 'react';

function ChildComponent(props) {
  const [name, setName] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    props.onFormData({ name });
  }

  function handleNameChange(event) {
    setName(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Child Component</h2>
      <div>
        <label>Name:</label>
        <input type="text" value={name} onChange={handleNameChange} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ChildComponent;

Here, we define the ChildComponent function that contains a form that the user will fill out. We define a useState hook to store the name input by the user, and then define a handleSubmit function that will be called when the form is submitted.

In handleSubmit, we prevent the default form submission, and then call the onFormData function that was passed down as a prop, passing in the name state value as the form data.

We also define a handleNameChange function that will update the name state whenever the user types in the input field.

Finally, we render the form markup with the onChange and onSubmit handlers we defined.

Step 3: Render the App

import React from 'react';
import ParentComponent from './ParentComponent';

function App() {
  return (
    <div>
      <ParentComponent />
    </div>
  );
}

export default App;

We define the App component that simply renders the ParentComponent.

Step 4: Test It Out

If we run the app, we'll see the parent component with the child component inside it. When we fill out the form and click "Submit", the handleFormData function in the parent component will be called, and we'll see the form data logged to the console.

Conclusion

Passing data from child components to parent components can be a bit tricky in React, but with callback functions, it can be done relatively easily. Simply define a function to receive the data in the parent component, pass that function down to the child component as a prop, and call that function in the child component when the data needs to be sent.

Hopefully this tutorial has been helpful in understanding how to pass data from child to parent components in React. Happy coding!