Parent-child data flow in React

Introduction

Parent-child data flow helps components share information clearly. The parent sends data down to the child, so the child can use or show it.

When a parent component needs to give information to a child component to display.

When you want to control a child component's behavior from the parent.

When you want to keep data in one place and share it with many children.

When you want to update the child component when the parent data changes.

Syntax

React

function Parent() {
  const data = 'Hello from parent';
  return <Child message={data} />;
}

function Child(props) {
  return <p>{props.message}</p>;
}

The parent passes data as props to the child.

The child receives data via the props object.

Examples

Parent sends a userName prop to child, which shows a welcome message.

React

function Parent() {
  const name = 'Alice';
  return <Child userName={name} />;
}

function Child(props) {
  return <h1>Welcome, {props.userName}!</h1>;
}

Using destructuring in child props to get number directly.

React

function Parent() {
  const count = 5;
  return <Child number={count} />;
}

function Child({ number }) {
  return <p>Count is {number}</p>;
}

Sample Program

This example shows a parent component sending a greeting message to its child. The child displays the message inside a paragraph.

React

import React from 'react';

function Parent() {
  const greeting = 'Hi there!';
  return (
    <div>
      <h2>Parent Component</h2>
      <Child message={greeting} />
    </div>
  );
}

function Child(props) {
  return (
    <div>
      <h3>Child Component</h3>
      <p>Message from parent: {props.message}</p>
    </div>
  );
}

export default Parent;

Important Notes

Data flows only one way: from parent to child.

Children cannot change props; they are read-only.

Use props to keep components simple and reusable.

Summary

Parent sends data to child using props.

Child receives data via props and uses it to render.

This keeps data flow clear and easy to follow.