How to Change Data in a Child Component from the Parent in React (Beginner Guide)

If you’re just getting started with React, you might be wondering how to send data from a parent component to a child component—and how to change that data from the parent. Don’t worry! This guide will explain it in the simplest terms, with real-world examples.

In React, data flows from parent to child using something called props (short for “properties”). When the parent updates the data, the child receives the new value automatically. Let’s walk through the concept step by step.

🔁 One-Way Data Flow in React

React is built on the principle of one-way data flow. This means:

• The parent component owns the data.
• The child component receives data via props.
• When the parent updates the data, the child automatically re-renders with the new value.

✅ Basic Example: Passing and Updating Data

1. Parent Component (Controls the Data)

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

const ParentComponent = () => {
  const [message, setMessage] = useState("Hello from Parent!");

  const changeMessage = () => {
    setMessage("Updated by Parent!");
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <button onClick={changeMessage}>Change Message</button>
      <ChildComponent message={message} />
    </div>
  );
};

export default ParentComponent;

2. Child Component (Displays the Data)

import React from "react";

const ChildComponent = ({ message }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{message}</p>
    </div>
  );
};

export default ChildComponent;

🖼️ Output:

• Initially, the child shows: “Hello from Parent!”
• When you click the button in the parent, the message becomes: “Updated by Parent!”

🔄 Two-Way Communication (Bonus: Updating Parent from Child)

Sometimes, you want the child component to send data back to the parent. This is possible by passing a callback function from the parent to the child.

Example:

const ParentComponent = () => {
  const [message, setMessage] = useState("Waiting for child...");

  const handleChildData = (dataFromChild) => {
    setMessage(dataFromChild);
  };

  return (
    <>
      <h1>Parent Message: {message}</h1>
      <ChildComponent sendData={handleChildData} />
    </>
  );
};

const ChildComponent = ({ sendData }) => {
  return (
    <button onClick={() => sendData("Hello from Child!")}>
      Send to Parent
    </button>
  );
};

🔧 What’s Happening?

• The parent sends the function handleChildData to the child as a prop.
• The child calls sendData(...) to update the parent’s state.
• The parent updates its message accordingly.

🧠 Key Takeaways

🧑‍🏫 Real-Life Analogy

Think of the parent as a teacher and the child as a student:

• The teacher gives the student instructions (props).
• If the teacher changes the instructions, the student follows the new ones.
• The student can also raise their hand (callback) to give feedback to the teacher.

📝 Conclusion

Changing data in a child component from the parent in React is simple once you understand props and state. Always remember:

• The parent holds the state (data).
• The child receives the state via props.
• The parent can change the data, and the child will automatically reflect those changes.

This pattern is the foundation of many real-world React applications, so mastering it is key to your success as a React developer.