How to Pass Props from Child to Parent Components in React: A Practical Guide

React components usually have a unidirectional data flow from parent to its children via props. But sometimes children components should be able to send data to its parent components. React doesn’t offer a built-in mechanism for passing props from children to parents, but we can workaround this using callback functions. In this how to guide, we’ll learn how to pass data from children to parent React components.

Understanding the Basics

To proceed to the practical part, here are some basic concepts that we need to recap:

• Props: Props are read-only attributes passed from parent to child components to configure or control their behavior.

• State: A component's internal data that can change over time and influence how the component is rendered.

• Callback Functions: These are the functions that are passed as props from parents to their children components, so the children can call them to notify the parents about some event occurred.

Step-by-Step Guide

Step 1: Create the Parent Component

First, let's create the parent component that will hold the state and a function to handle data from the child component.

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState('');

  const handleDataFromChild = (childData) => {
    setData(childData);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Data from child: {data}</p>
      <ChildComponent sendDataToParent={handleDataFromChild} />
    </div>
  );
};

export default ParentComponent;

In this example, ParentComponent maintains a state called data and a function handleDataFromChild to update this state. The ChildComponent is rendered and the function handleDataFromChild is passed to it as a prop named sendDataToParent.

Step 2: Create the Child Component

Next, create the child component that will send data to the parent using the callback function.

import React, { useState } from 'react';

const ChildComponent = ({ sendDataToParent }) => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleClick = () => {
    sendDataToParent(inputValue);
  };

  return (
    <div>
      <h2>Child Component</h2>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button onClick={handleClick}>Send Data to Parent</button>
    </div>
  );
};

export default ChildComponent;

Here, ChildComponent has its own state inputValue to manage the input field's value. When the button is clicked, the handleClick function is triggered, which calls the sendDataToParent function passed from the parent component, sending the current inputValue.

Step 3: Connect Parent and Child

Now that we have both the parent and child components set up, let's ensure they work together. When the user types into the input field in the child component and clicks the button, the parent component will receive the data and update its state accordingly.

Summary

In this tutorial, we have gone through how to pass data from a child component to a parent component in React using callback functions. Here is a quick recap:

• In the parent component, define a function: The function is going to handle the data received from the child component.

• Pass the function down to the child as a prop: Now, the child component can call this function to send data back to the parent.

• Call the function back from the child component: Generally called when user actions are performed, such as button-clicking.

This pattern is the fundamental aspect of React's one-way data flow; that way, your child components can communicate with their parents in a real effective way. Happy coding!