How do you send data from parent to child component in React?

Question

How do you send data from parent to child component in React?

Answer

You use props — short for “properties.”
Props are how data flows downward in React.

function Child({ name }) {
  return <h3>Hello, {name}!</h3>;
}

function Parent() {
  return <Child name='Ghazi' />;
}

Here, name is passed as a prop from Parent → Child.

Props are read-only in the child. If the child needs to change something, it must ask the parent via a callback (we’ll cover that later).

Real-World Example

Passing data like:

• user object to Profile components
• theme values to Button or Layout
• config props to reusable UI blocks

Quick Practice

Create a parent that passes a user object to a UserCard component and display name, email, and role.

Summary

Props are the data bridge between parent and child components in React.