Props are the inputs of a React component. A parent passes them as attributes in JSX, <UserCard name="Ada" online={true} />, and the child receives them as a single object, which you usually destructure in the function's parameters. Props let one component show different data each time you use it.
The same UserCard renders three different people. Notice the last one: an attribute with no value, online, means online={true}. Add a fourth card with your own name and role.
Passing and reading props
Pass a string in quotes and any other value in curly braces: numbers, booleans, arrays, objects, functions, even JSX.
<Product
title="Desk lamp"
price={39.5}
inStock={false}
tags={['light', 'office']}
seller={{ name: 'Lumen', rating: 4.8 }}
/>
React collects all attributes into one object and passes it as the first argument of the component. You can read it as props, or unpack the fields you need right in the parameter list:
function Product(props) {
return <h3>{props.title}</h3>;
}
function Product({ title, price, seller }) {
return <h3>{title}, ${price} from {seller.name}</h3>;
}
Both versions receive the same object. Destructuring is the common style because the function signature then lists exactly which props the component uses.
Default values
Give a prop a default with JavaScript's destructuring default, = value. It applies when the parent leaves the prop out, or passes undefined. It does not apply to null, 0, false or '', which are real values.
The first three buttons fall back to their defaults where a prop is missing or undefined. The last one passes null, so size really is null, and the lookup finds no padding. Change size={null} to size="small" to fix it.
Older code sets defaults with a static property, Button.defaultProps = { size: 'medium' }. React 19 removed defaultProps for function components: JSX ignores it on a function, without a warning. It still works on class components. Use destructuring defaults.
Passing functions as props
Data flows down: a parent passes props to its children, never the other way. When a child needs to tell the parent something happened, the parent passes a function, and the child calls it. By convention these props are named onSomething.
Rating does not store anything. It shows the value it receives and reports clicks through onRate. The state lives in App, which passes it back down. Pass onRate={setRating} directly instead of handleRate and it still works: a setter is a function too. Moving state into a common parent like this is called lifting state up.
Spreading props
When you already have an object whose keys match a component's props, spread it with {...object} instead of writing each attribute. The rest syntax does the opposite in the parameter list: take a few props by name, collect everything else, and forward it.
The second avatar spreads person and then sets color: when the same prop appears twice, the later one wins, so put overrides after the spread. TextField keeps label for itself and passes type, placeholder and maxLength straight to the <input>. Use spreading for wrappers like this one; elsewhere, listing props explicitly makes it easier to see what a component gets.
Props are read only
A component must never change its own props. They belong to the parent, and the same object may be shared. Treat them like function arguments you are not allowed to reassign:
function Counter({ count }) {
count = count + 1; // wrong: changes a local copy, the parent never sees it
return <p>{count}</p>;
}
function Profile(props) {
props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
return <p>{props.name}</p>;
}
Props still change over time. When the parent renders again with new values, the child receives a new props object and renders with it:
Temperature never changes celsius. It computes fahrenheit from it on every render. Drag the slider and the parent's state changes, so the child gets a new prop. If a child needs a value that it can change by itself, that value is state, not a prop.
Props vs state
Props and state are both plain JavaScript values that affect what a component renders, and a change to either one renders the component again. The difference is who owns the value.
| Props | State | |
|---|---|---|
| Comes from | The parent, as JSX attributes | The component itself, from useState or useReducer |
| Can the component change it | No, it is read only | Yes, through its setter |
| Typical use | Configure a component: a label, a size, the data to show | Remember something that changes: input text, an open menu |
The same value is often both. In the temperature example above, celsius is state in App and a prop in Temperature. The owner holds it as state and passes it down as a prop, together with a function to change it when a child needs that.
A prop can hold any value, including JSX and components. Passing an element such as icon={<StarIcon />} lets a parent fill a slot in a child, the same idea as children with a name of your choice.
The children prop
Whatever you put between a component's opening and closing tags arrives as a prop named children. This is how you build wrappers such as cards, panels and layouts that do not know their content in advance:
The children page covers passing several slots and working with children safely.
Keys are not props
key looks like an attribute, but React keeps it for itself to match list items between renders. The component never receives it:
The console shows props.key as undefined and props.id with the real value. When a child needs the identifier, pass it a second time under another name, as id does here. A development build also warns when you read props.key; the preview runs like a production build, so you only see the undefined.
Frequently Asked Questions
What are props in React?
Props (short for properties) are the arguments of a component. A parent passes them as JSX attributes, <Avatar size={48} />, and the child receives them as one object, usually destructured: function Avatar({ size }).
How do I set a default value for a prop?
Use a destructuring default: function Button({ size = 'medium' }). The default applies when the prop is missing or undefined. React 19 removed defaultProps for function components; class components still support it.
Can a child component change its props?
No. Props are read only. To change what a child shows, the parent passes new props; to let the child ask for a change, the parent passes a function such as onChange and the child calls it.
What is the difference between props and state?
Props come from the parent and the child cannot change them. State belongs to the component itself and changes through its setter. A value is often state in a parent and a prop in its children.
Why is props.key undefined?
key (like ref in older React) is used by React itself to track list items and is not passed to the component. If the child needs the value, pass it again under another name, for example <Row key={id} id={id} />.
