DEV Community

yungcodedev
yungcodedev

Posted on

2 1

What are props in react js ?

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

The above is an example of a prop with some property names such as image, rating, etc.

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

The only thing worse than downtime? No Answers.

If you’re sometimes frustrated with opaque infrastructure, sluggish support, and mysterious outages, we prepared a webinar just for you

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️