React · Chapter 5 of 42
Props
Props (short for properties) let you pass data from a parent component to a child component. Props are read-only — a component must never modify its own props.
Props make components configurable and reusable, similar to function parameters.
Passing props
You pass props as JSX attributes: `<Greeting name="Ada" />`. Inside the component, access them via the `props` parameter.
Destructuring props
It's common to destructure props directly in the function signature for cleaner code: `function Greeting({ name }) { ... }`.
Example 1 (jsx)
function Greeting({ name }) {
return <p>Hello, {name}!</p>;
}
function App() {
return <Greeting name="Ada" />;
}Output
Hello, Ada!The `name` prop is passed to Greeting and rendered.
Key points
- Props pass data from parent to child components.
- Props are read-only and must not be mutated.
- Props can be destructured for cleaner syntax.
- Any JS value (string, number, function, object) can be a prop.
💡 Note: If a component needs to change data, that data should live in state, not in a prop.