Passing Props
In this page:
Passing a Single Prop
Props are passed to a component the same way you'd set an attribute on an HTML tag: <Greeting name="Sam" />. Inside the component, that value is available on the props object the function receives as its argument.
Note: Prop names follow camelCase convention, just like JSX attributes.
Warning: Forgetting to include props as the function's parameter means you can't access any passed-in values.
Example: Passing a Single Prop
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting(props) {
return <p>Hello, {props.name}!</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting name="Sam" />);
</script>
</body>
</html>Passing Multiple Props
A component can receive as many props as needed, each passed as its own attribute. All of them arrive bundled together inside the single props object, and you read each one off that object by name.
Note: If a component starts needing many props, consider whether it should be split into smaller components instead.
Warning: A typo in a prop name on the calling side (like Usre instead of User) won't throw an error -- it will just silently be undefined.
Example: Passing Multiple Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function UserCard(props) {
return <p>{props.name} is {props.age} years old.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserCard name="Alex" age={30} />);
</script>
</body>
</html>Props Are Read-Only
A component must never change the values it receives via props -- props flow one-way, from parent to child. If a component needs to change over time, that change should come from state instead, not from mutating props directly.
Note: Think of props like function arguments: you use them, but you don't reassign them inside the function.
Warning: Writing props.name = 'New Name' inside a component doesn't work as expected and violates React's data flow rules.
Example: Props Are Read-Only
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Label(props) {
// props.text = "changed"; // Not allowed -- props are read-only
return <span>{props.text}</span>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Label text="Original text" />);
</script>
</body>
</html>- Trying to modify a prop's value directly inside the component -- props are read-only.
- Forgetting to destructure or access props correctly, e.g. writing
nameinstead ofprops.name. - Passing a prop with the wrong name than what the component expects, so it silently renders undefined.
- Props are inputs passed from a parent component to a child component.
- They are passed as attributes in JSX, similar to HTML attributes.
- Props are read-only -- a component must never modify its own props.
- Props let you make components reusable and configurable.
No browser-specific restrictions -- props are a core React data-flow concept.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: