React › Props & State

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

Beginner

Answer

You pass data as props, which look like HTML attributes when writing JSX. The child component receives these values as a single object, usually written using destructuring to pull out each named value directly.

function ParentComponent() {
  return <UserCard name="Alice" age={30} />;
}

function UserCard({ name, age }) {
  return <p>{name} is {age} years old</p>;
}

Real-world example A parent dashboard page passes a specific user's name and age down to a reusable UserCard component, letting the same card component display different information for every different user.

Common follow-ups: What happens if a child component tries to change the value of a prop it received?;How would you pass a function as a prop so a child can communicate back to its parent?

Component Composition & Children Props;Components & JSX