Some Random Notes

5. Parent and Child Components

4 min read

1. Core Concept

Key Rule

The component that renders (not define) another component is its parent.

The component being rendered is its child.

In React, parent-child relationships are determined by how components are nested in JSX, not by their names or where their functions are defined.

2. Visualize the Relationship

flowchart TD
    P["Parent Component"]
    C["Child Component"]
    
    P -->|"Renders Child"| C
    P -->|"Passes props"| C
    
    style P fill:#dbeafe,stroke:#2563eb,color:#1e3a8a
    style C fill:#dcfce7,stroke:#16a34a,color:#166534

  • Parent: Renders another component.

  • Child: Is rendered by another component.

  • Props: Carry data from parent to child.

3. Example: Parent Component

function Parent() {
  return (
    <div>
      <Child name="Alex" age={24} />
    </div>
  );
}

How to identify the parent?

Look at this line:

<Child name="Alex" age={24} />

The Parent component renders <Child />, so Parent is the parent of Child.

The parent also passes two props:

PropValueType
name"Alex"String
age{24}Number

JSX Syntax

  • name="Alex" passes a string.

  • age={24} passes a JavaScript number.

  • Curly braces allow JavaScript expressions inside JSX.

4. Example: Child Component

function Child(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

The child receives the props and uses them to render its UI.

Output:

Aman
Age: 24

Data flow

flowchart TD
    A["Parent"]
    B["name = Alex"]
    C["age = 24"]
    D["Child receives props"]
    E["Displays Aman, Age: 24"]

    A --> B
    A --> C
    B --> D
    C --> D
    D --> E

One-Way Data Flow

Props flow from parent to child. A child should not directly modify its props. To request a change in parent-owned state, the child can call a callback function passed through props.

5. Multiple Child Components

function Dashboard() {
  return (
    <div>
      <Sidebar />
      <Profile />
      <Footer />
    </div>
  );
}
flowchart TD
    A["Dashboard"]
    B["Sidebar"]
    C["Profile"]
    D["Footer"]

    A --> B
    A --> C
    A --> D

Here:

  • Dashboard is the parent.

  • Sidebar, Profile, and Footer are its children.

  • All three are rendered by Dashboard.

A component can be both a child of one component and a parent of another.

For example, if Dashboard renders Profile, and Profile renders Avatar, then Profile is a child of Dashboard and a parent of Avatar.

6. Parent vs. Child: Quick Reference

QuestionAnswer
Who is the parent?The component that renders another component.
Who is the child?The component rendered by another component.
How does the child receive data?Through props.
Can a parent have multiple children?Yes.
Can a child also be a parent?Yes.
Can a child directly modify its props?No. Props are read-only.
Can a child communicate with its parent?Yes, typically through a callback passed as a prop.

7. Common Interview Pitfalls

Don't confuse function definition with rendering

Defining function Child() does not make it a child of Parent. It becomes a child in the component tree when another component renders it using JSX, such as <Child />.

Quick identification trick

Search for <ComponentName /> inside another component’s returned JSX. The component containing that JSX is the parent of the rendered component.

Props vs. children

In <Child name="Alex" />, name is a prop. In <Panel><Child /></Panel>, Child is rendered as part of Panel’s children content. Both examples establish rendering relationships between components.

8. Interview Question

Follow-up Questions

  • What is the difference between props and state?

  • How does a child notify a parent about an event?

  • What is the difference between props.children and named props?

  • How does React build the component tree?

  • What happens when a parent component re-renders?

References

Backlinks