Props Drilling — Passing Data Through Components

Context & Patterns — Beginner React challenge.

A `user` object needs to reach a deeply nested UserBadge component, three layers down from where it starts. Pass it through each intermediate component using props alone — no Context yet. This is the exact pain point that makes Context click later.

Requirements

• ProfilePage receives a `user` prop and forwards it down to Layout.
• Layout forwards `user` down to Sidebar.
• Sidebar forwards `user` down to UserBadge.
• UserBadge renders user.name inside data-testid="user-name".
• UserBadge renders user.role inside data-testid="user-role".

Signature

function ProfilePage({ user }: { user: { name: string; role: string } }): JSX.Element

Example

<ProfilePage user={{ name: "Asha Verma", role: "Senior Engineer" }} />
// renders "Asha Verma" and "Senior Engineer" three components deep

Constraints

• Do not use Context, global state, or module-level variables.
• Every intermediate component must explicitly receive and forward the prop.