React Props
⚛️ React Props
Props (short for properties) are a way to pass data from a parent component to a child component in React.
Props are read-only
They make components reusable
Functional and class components can both use props
Props in Functional Components
{ name }is destructured from propsProps allow dynamic content in child components
Props in Class Components
Access props using
this.propsProps are immutable in the child component
Passing Multiple Props
Props with Default Values
You can provide default props in case a prop is not passed.
Functional Component
Class Component
Props with Children
props.children allows you to pass nested content inside a component.
Anything between
<Card> ... </Card>becomesprops.children
Props for Functions / Event Handling
Props can also pass functions to child components.
🎯 Summary
| Concept | Functional Component | Class Component |
|---|---|---|
| Access props | { propName } or props.propName | this.props.propName |
| Default props | function Comp({ name = "Guest" }) | static defaultProps = {} |
| Children | props.children | this.props.children |
| Functions as props | Pass handleClick | Pass handleClick |
Key Notes:
Props are read-only
Do not modify props inside child components
Use state if the value needs to change
