This content originally appeared on DEV Community and was authored by Marvin Roque
Hey there! đź‘‹ back with another React post. Today, let's talk about props - they're just like passing notes between components!
What Are Props?
Props are React's way of sending data from one component to another. Think of them like passing arguments to a function, but for components.
Here's a simple example:
function Welcome({ name }) {
return <h1>Hey, {name}!</h1>;
}
// Using it:
function App() {
return (
<div>
<Welcome name="React Friend" />
</div>
);
}
Making Components Flexible
Let's make something more useful - a simple card component:
function Card({ title, description, buttonText }) {
return (
<div className="card">
<h2>{title}</h2>
<p>{description}</p>
<button>{buttonText}</button>
</div>
);
}
// Using our card:
<Card
title="My First Card"
description="This is awesome!"
buttonText="Click me"
/>
Default Props
Sometimes people might forget to pass props. We can handle that:
function Card({ title = "Default Title", description = "No description provided" }) {
return (
<div className="card">
<h2>{title}</h2>
<p>{description}</p>
</div>
);
}
Cool Patterns I Use
1. Object Props
When you have lots of props:
function UserCard({ user }) {
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
);
}
// Using it:
<UserCard user={{ name: "Alex", email: "alex@email.com" }} />
2. Children Props
For flexible content:
function Container({ children }) {
return (
<div className="container">
{children}
</div>
);
}
// Using it:
<Container>
<h1>Any content here!</h1>
<p>Works great!</p>
</Container>
Quick Tips!
- Props are read-only - don't try to change them!
- Use clear prop names that make sense
- Keep your components simple
- Default props save you from errors
That's it for props! Not so scary after all, right?
Drop a comment if you make something cool with these patterns! 🚀
Found this helpful? Follow for more React tips!
This content originally appeared on DEV Community and was authored by Marvin Roque
Marvin Roque | Sciencx (2025-02-04T02:39:18+00:00) React Props Explained Simply: Passing Data Between Components. Retrieved from https://www.scien.cx/2025/02/04/react-props-explained-simply-passing-data-between-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.