React Parent to Child Communication

In the last lesson, React State Best Practices, you saw how a component keeps and changes its own data. Here we look at the most common way components talk to each other: a parent handing data down to its child.

🤔 Why parent to child?

A React app is a tree of components. The parent sits on top and the children sit under it. So how does the data the parent has reach the child that needs to show it?

• The parent often holds the important data, so think a count, a logged-in user, or a list of messages.
• The child is the small piece that actually shows that data on screen.
• The child does not magically know the parent’s data, so the parent has to send it.
• This sending of data from parent down to child is the most common kind of communication in React.

So almost every React app is built on this one move: the parent has the data and passes it to the children that need it.

📦 The parent owns the data

Before data can travel anywhere, someone has to own it. In this pattern the parent is the owner.

• The parent holds the data, very often in state.
• “Owning” means the parent is the one place that data lives and changes.
• The child does not own it, so it only borrows a copy to display.

Here a parent holds a count in state. Right now it just owns the number, it has not passed it anywhere yet.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0); // the parent owns count

  return <h1>The count is {count}</h1>;
}

So App is the owner of count. Next we need to get that number into a separate child component.

⬇️ Passing data down as props

The way a parent sends data to a child is through props. You learned props earlier, so here we just use them as the channel for communication.

• The parent writes the data as an attribute on the child, like <Display count={count} />.
• The child receives it as a normal prop and shows it.
• That single attribute is the whole “message” travelling from parent to child.

Here the parent passes its count down, and the child reads it and displays it.

import { useState } from "react";

// Child: receives count and just displays it
function Display({ count }) {
  return <h1>The count is {count}</h1>;
}

// Parent: owns count, sends it down
function App() {
  const [count, setCount] = useState(0);
  return <Display count={count} />;
}

So App owns the data and Display shows it. The number flowed from the parent into the child through one prop. That is parent to child communication, start to finish.

🧒 The child just receives and shows

Notice what the child is doing here, and what it is not doing.

• The child takes the prop in and puts it on screen, so that is its whole job.
• The child does not create the count, and it does not change the count.
• It does not even know the count lives in state up in the parent, so it only sees a value called count.
• This keeps the child simple and reusable. You could hand it any number and it would happily show it.

So the child is like a small screen that displays whatever the parent feeds it. Feed it a different value and it shows that instead.

🔁 The child updates automatically

Here is the part that makes this feel alive. When the parent’s data changes, the child updates on its own, so you do not refresh it by hand.

• The parent changes its state, for example with setCount.
• Changing state makes the parent re-render.
• When the parent re-renders, it passes the new value down as a prop again.
• The child receives the new prop and re-renders with it, so the screen updates.

Here the parent has a button that changes its state. Watch how the child shows the new number every time, even though the child has no button of its own.

import { useState } from "react";

function Display({ count }) {
  return <h1>The count is {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Display count={count} />
      <button onClick={() => setCount(count + 1)}>Add one</button>
    </div>
  );
}

The count is 0      (then you click Add one)
The count is 1
The count is 2

So the child never touches the count itself. The parent changes state, re-renders, and sends the fresh value down. That automatic update is the real benefit of this pattern.

➡️ It is one-way, downward only

There is one direction rule to lock in. In React, data flows down, so the parent sends to the child, never the other way around through props. This is called one-way data flow.

• Data travels in one direction only: from the parent down to the child.
• The child cannot push data back up to the parent through props.
• This makes the app predictable, so if a value on screen is wrong, you look at the parent that sent it.

This diagram shows the single direction the data moves.

So the data path is short and clear. One owner at the top, sending down. You do not have to hunt in many places to find where a value came from.

🧩 What You’ve Learned

• ✅ Parent to child is the most common form of communication in React
• ✅ The parent owns the data, very often by holding it in state
• ✅ The parent passes that data down to the child as props
• ✅ The child just receives the prop and displays it, nothing more
• ✅ When the parent’s data changes, it re-renders and the child gets the new prop automatically
• ✅ Data flows one way, downward only, from parent to child

🚀 What’s Next?

So now you know how a parent sends data down to a child. But what about the other direction? Often the child needs to tell the parent that something happened, like a click. Next you will learn exactly how a child talks back up to its parent.

React Child to Parent Communication