Props: Passing Data to Components

Make one component show different data by passing it props — the mechanism behind every reusable card, button, and list item.

Step 1 of 3

Same component, different data

A Greeting that always says the exact same thing isn't very useful. Real components take props — short for "properties" — which are values you pass in, exactly like attributes on an HTML tag.

This is how one component powers a whole feed. Netflix renders one <MovieCard /> component, but passes each one a different title, image, and rating prop. Twitter/X renders one <Tweet /> with a different author and text each time.

You pass props like attributes: <MovieCard title="Dune" year={2021} />. Inside the component, you receive them as an object — and the clean way to read them is to destructure: function MovieCard({ title, year }) { ... }.

Think of it this way: A component is a cookie cutter; props are the dough and icing. The cutter (shape) stays the same, but each cookie can be a different flavor and color. One <ProductCard /> cutter, a hundred different products.

Web Standard

Props flow one way: from parent down to child. And they are read-only — a component must never change its own props. If you need a value that changes over time, that's state (the next lesson), not props.

Learn more on MDN

React.dev — Passing props to a component