React Course
React
/
Beginner

Parent to Child Communication

Definition

The standard unidirectional data flow in React where a parent component passes data down to a child component using Props.

Explain Like I'm New

Imagine a manager giving a task to an employee. The manager (Parent) writes the instructions on a clipboard (Props) and hands it down to the employee (Child). The employee just reads the clipboard and does the work.

Real World Example

A `<UserProfile>` component fetches user data from an API, and passes `name` and `avatarUrl` down as props to a `<ProfileAvatar>` child component.

Common Use Cases

  • •Passing pure data to presentational components
  • •Configuring child component behavior (e.g., `isDisabled={true}`)

Interactive Example

import React, { useState } from "react";

// Child Component
function Child({ name, age, isOnline }) {
  return (
    <div className="p-4 border bg-gray-100">
      <h3>Child Component</h3>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Status: {isOnline ? "🟢 Online" : "🔴 Offline"}</p>
    </div>
  );
}

// Parent Component
export default function Parent() {
  const [isOnline, setIsOnline] = useState(true);

  // Passing data downwards via Props
  return (
    <div className="p-4">
      <h2>Parent Component</h2>
      <button onClick={() => setIsOnline(!isOnline)}>
        Toggle Child Status
      </button>
      <br /><br />
      
      {/* Data flows down to the child */}
      <Child name="Alice" age={28} isOnline={isOnline} />
    </div>
  );
}

Interview Questions

basic

  • How does a parent pass data to a child?
  • Can a child change the props passed to it by the parent?

intermediate

  • What happens to the child when the parent's state changes?
  • How do you pass a large number of props without writing them all out manually?

advanced

  • How can you prevent a child from re-rendering if the parent re-renders but the props haven't changed?

trick

  • If you pass a prop down as `initialValue={10}` and the parent later changes it to `20`, does the child's internal `useState(initialValue)` update to 20?

Flash Cards

Question

Can a child change its props?

Click to reveal answer
Answer

No. Props are strictly read-only. A component must never modify its own props. If the data needs to change, it must be managed as State.

Question

How do you pass a large number of props easily?

Click to reveal answer
Answer

You can use the object spread operator: `<ChildComponent {...userObject} />`. This will pass all keys in the object as individual props.

Question

Does the child's internal useState update if the initial prop changes?

Click to reveal answer
Answer

NO! `useState(initialValue)` ONLY looks at the initial value during the very first render. If the parent passes a new prop value later, `useState` completely ignores it. This is a very common bug.