React Props
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
props stands for properties.
React Props
React Props are like function arguments in JavaScript and attributes in HTML.
To send props into a component, use the same syntax as HTML attributes:
Example
Add a brand attribute to the Car element:
createRoot(document.getElementById('root')).render(
<Car brand="Ford" />
);The component receives the argument as a props object:
Example
Use the brand attribute in the Car component:
function Car(props) {
return (
<h2>I am a {props.brand}!</h2>
);
}
The name of the object is props, but you can call it anything you want.
Example
You can use myobj instead of props in the component:
function Car(myobj) {
return (
<h2>I am a {myobj.brand}!</h2>
);
}
Pass Multiple Properties
You can send as many properties as you want.
Every attribute is sent to the Car component as object properties.
Example
Send multiple properties to the Car component:
createRoot(document.getElementById('root')).render(
<Car brand="Ford" model="Mustang" color="red" />
);All properties are received in the Car component inside the props object:
Example
Use the property values in the Car component:
function Car(props) {
return (
<h2>I am a {props.color} {props.brand} {props.model}!</h2>
);
}
Different Data Types
React props can be of any data type, including variables, numbers, strings, objects, arrays, and more.
Strings can be sent inside quotes as in the examples above, but numbers, variables, and objects need to be sent inside curly brackets.
Example
Numbers has to be sent inside curly brackets to be treated as numbers:
createRoot(document.getElementById('root')).render(
<Car year={1969} />
);Example
Variables has to be sent inside curly brackets:
let x = "Ford";
createRoot(document.getElementById('root')).render(
<Car brand={x} />
);Example
Objects and Arrays has to be sent inside curly brackets:
let x = [1964, 1965, 1966];
let y = {name: "Ford", model: "Mustang"};
createRoot(document.getElementById('root')).render(
<Car years={x} carinfo={y} />
);Object Props
The component treats objects like objects, and you can use the dot notation to access the properties.
Example
Use the dot notation to access object properties:
function Car(props) {
return (
<>
<h2>My {props.carinfo.name} {props.carinfo.model}!</h2>
<p>It is {props.carinfo.color} and it is from {props.carinfo.year}!</p>
</>
);
}
const carInfo = {
name: "Ford",
model: "Mustang",
color: "red",
year: 1969
};
createRoot(document.getElementById('root')).render(
<Car carinfo={carInfo} />
);
Array Props
Array props can be accessed using the indexes.
Example
Use the indexes to access array properties:
function Car(props) {
return (
<h2>My car is a {props.carinfo[0]} {props.carinfo[1]}!</h2>
);
}
const carInfo = ["Ford", "Mustang"];
createRoot(document.getElementById('root')).render(
<Car carinfo={carInfo} />
);
Pass Props from Component to Component
Attributes are also how you pass data from one component to another, as parameters.
Example
Send the brand attribute from the Garage component to the Car component:
function Car(props) {
return (
<h2>I am a {props.brand}!</h2>
);
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
createRoot(document.getElementById('root')).render(
<Garage />
);
Note: React Props are read-only! You will get an error if you try to change their value.
