Passing Props
Props are like instructions you hand to a component, telling it exactly what to display -- the same way you'd tell a baker what to write on a cake.
In this page:
Syntax
function ComponentName(props) {
return <element>{props.propName}</element>; // read-only
}
<ComponentName propName="text" otherProp={expression} />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>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- 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.
Chapter Summary
- 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.
Browser Support
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: