Props are basically arguments passed in a react component and with the help of props you can pass the data instead of hard coding it and rendering on the screen.
export default function Card(props) {
return (
<div className="card">
<img src={`../images/${props.img}`} className="card--image" />
<div className="card--stats">
<img src="../images/star.png" className="card--star" />
<span>{props.rating}</span>
<span className="gray">({props.reviewCount}) • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p><span className="bold">From ${props.price}</span> / person</p>
</div>
)
}
The above is an example of a prop with some property names such as image, rating, etc.
Top comments (0)