Reuse Component in Loop

Make a Component

const User = () => {
return (
<div>
<h1>User Component</h1>
</div>
);
};

export default User;


Apply map() for Looping

return (
<div>
<h1>Reuse Component in Loop</h1>
{userData.map((user) => (
// render component here
))}
</div>
);


Render Component in Loop

{userData.map((user) => (
<div key={user.id}> {/* use key to avoid error */}
<User />
</div>
))}


Pass Data to Component

{userData.map((user) => (
<div key={user.id}>
<User user={user} />
</div>
))}


Receive Props in User.jsx

In User.jsx:

const User = ({ user }) => {
return (
<div>
<h3>
Name: <span style={{ color: "green" }}>{user.name}</span>
</h3>
<h3>
Age: <span style={{ color: "green" }}>{user.age}</span>
</h3>
<h3>
Email: <span style={{ color: "green" }}>{user.email}</span>
</h3>
</div>
);
};

export default User;

Now, the component shows dynamic data using props.


Add Style

Wrap the content inside this div:

<div
style={{
border: "1px solid green",
padding: "10px",
margin: "10px",
width: "400px",
borderRadius: "5px",
}}
>
{/* content here */}
</div>

This adds border, padding, and spacing for better UI.