7. How do you pass data from a child component to a parent component that moves up the component tree in React?
medium

When working with React components, it's common to need to pass data from a child component to its parent component. This can be achieved using several approaches. In this answer, we'll explore how to pass data from a child component to its parent component in React.

Approach 1: Using Props

One way to pass data from a child component to its parent component is by using props. You can create a function or method in your child component that returns the data you want to share with the parent component. Then, you can pass this function as a prop to the child component.

Explanation of Key Concepts

  1. Props: Props (short for properties) are immutable attributes passed from a parent component to its child component.
  2. Functions as props: By passing functions as props, you can enable the child component to return data to the parent component.

To pass data from a child component to its parent component using props:

  1. Create a function in the child component: Define a function in your child component that returns the data you want to share with the parent component.
function Child() {
  const getData = () => {
    // Return the data to be shared
    return { name: "John", age: 30 };
  };

  return (
    <div>
      <button onClick={() => getData()}>Get Data</button>
    </div>
  );
}
  1. Pass the function as a prop: Pass the getData function as a prop to the child component.
function Parent() {
  const handleGetData = (data) => {
    console.log("Received data from child:", data);
  };

  return (
    <div>
      <Child getData={handleGetData} />
    </div>
  );
}
  1. Use the function in the parent component: In the parent component, use the getData function to receive the shared data.
const handleGetData = (data) => {
  console.log("Received data from child:", data);
};

Approach 2: Using State and Hooks

Another approach is to use state management with React hooks. You can lift the state up to a higher component in the tree, making it accessible to both the parent and child components.

Explanation of Key Concepts

  1. State: A state in React represents the dynamic data that changes throughout the application.
  2. Hooks: Hooks are a way to use state and other React features from function components.

To pass data from a child component to its parent component using hooks:

  1. Lift the state up: Lift the shared state up to a higher component in the tree.
import { useState, useEffect } from "react";

function Parent() {
  const [data, setData] = useState({ name: "", age: "" });

  const handleGetData = (newData) => {
    console.log("Received data from child:", newData);
    setData(newData);
  };

  return (
    <div>
      <Child onGetData={handleGetData} />
    </div>
  );
}
  1. Use the state and callback in the child component: In the child component, use the shared state and callback to send data back to the parent.
function Child({ onGetData }) {
  const handleButtonClick = () => {
    const newData = { name: "John", age: 30 };
    onGetData(newData);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Send Data</button>
    </div>
  );
}

Conclusion

In this answer, we've seen two approaches to passing data from a child component to its parent component in React:

  1. Using props and functions: Pass functions as props to enable the child component to return data to the parent.
  2. Using state and hooks: Lift the shared state up to a higher component in the tree and use React hooks to manage it.

Example Use Case

Both approaches can be used depending on your specific requirements. For example, if you need to share complex or large amounts of data, using hooks might be more suitable. On the other hand, if you need fine-grained control over the shared state, passing functions as props could be a better choice.

// Example use case using props and functions
function Parent() {
  const handleGetData = (data) => {
    console.log("Received data from child:", data);
  };

  return (
    <div>
      <Child getData={handleGetData} />
    </div>
  );
}

function Child({ getData }) {
  const getDataFromAPI = () => {
    // Simulate fetching data from an API
    const newData = { name: "John", age: 30 };
    getData(newData);
  };

  return (
    <button onClick={getDataFromAPI}>Fetch Data</button>
  );
}
PreviousNext