React Props
Props are data passed to components
Props means properties
How to Pass Props
javascript
<Car brand="Ford" />Receive Props in Component
javascript
function Car(props) {
return <h2>{props.brand}</h2>
}Props like Function Arguments
Props work like function arguments
Data is passed from parent to child
Multiple Props
javascript
<Car brand="Ford" model="Mustang" color="red" />javascript
function Car(props) {
return <h2>{props.brand} {props.model}</h2>
}Different Data Types
String
javascript
<Car name="Ford" />Number
javascript
<Car year={1969} />Variable
javascript
let x = "Ford"
<Car brand={x} />Object Props
javascript
const car = { name: "Ford", model: "Mustang" }
<Car carinfo={car} />javascript
function Car(props) {
return <h2>{props.carinfo.name}</h2>
}Array Props
javascript
const data = ["Ford", "Mustang"]
<Car carinfo={data} />javascript
function Car(props) {
return <h2>{props.carinfo[0]}</h2>
}Props Between Components
javascript
function Garage() {
return <Car brand="Ford" />
}React Destructuring Props
Destructuring means getting values directly from props
No need to write props.color again and again
Basic Destructuring
javascript
function Car({ color }) {
return <h2>{color}</h2>
}Destructuring Inside Component
javascript
function Car(props) {
const { brand, model } = props
return <h2>{brand} {model}</h2>
}Rest Operator
javascript
function Car({ brand, color, ...rest }) {
return <h2>{brand} {rest.model}</h2>
}rest stores remaining props
Default Values
javascript
function Car({ color = "blue", brand }) {
return <h2>{color} {brand}</h2>
}If value not passed then default is used
React Props Children
props children is used to pass content between component tags
javascript
function Card(props) {
return <div>{props.children}</div>
}How to Use
javascript
<Card>
<p>Hello World</p>
</Card>Content inside Card will be shown using props.children
Example with Components
javascript
function Son(props) {
return (
<div>
<h2>Son</h2>
{props.children}
</div>
)
}javascript
<Son>
<p>This is from parent</p>
</Son>Parent sends content
Child receives using props.children