This content originally appeared on DEV Community and was authored by Shreyash Pingle
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.
This content originally appeared on DEV Community and was authored by Shreyash Pingle
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Shreyash Pingle | Sciencx (2022-04-02T17:43:39+00:00) What are props in react js ?. Retrieved from https://www.scien.cx/2022/04/02/what-are-props-in-react-js/
" » What are props in react js ?." Shreyash Pingle | Sciencx - Saturday April 2, 2022, https://www.scien.cx/2022/04/02/what-are-props-in-react-js/
HARVARDShreyash Pingle | Sciencx Saturday April 2, 2022 » What are props in react js ?., viewed ,<https://www.scien.cx/2022/04/02/what-are-props-in-react-js/>
VANCOUVERShreyash Pingle | Sciencx - » What are props in react js ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/02/what-are-props-in-react-js/
CHICAGO" » What are props in react js ?." Shreyash Pingle | Sciencx - Accessed . https://www.scien.cx/2022/04/02/what-are-props-in-react-js/
IEEE" » What are props in react js ?." Shreyash Pingle | Sciencx [Online]. Available: https://www.scien.cx/2022/04/02/what-are-props-in-react-js/. [Accessed: ]
rf:citation » What are props in react js ? | Shreyash Pingle | Sciencx | https://www.scien.cx/2022/04/02/what-are-props-in-react-js/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.