How to pass props in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Passing props between React components is fundamental for creating reusable, modular components and establishing proper data flow in component hierarchies. As the creator of CoreUI, a widely used open-source UI library, I’ve designed thousands of React components that rely on props for customization, data sharing, and flexible API design in enterprise applications. From my expertise, the most effective approach is to pass props as attributes to child components and destructure them in the function parameters. This method provides clean component interfaces, type safety with TypeScript, and excellent developer experience with IntelliSense support.
Pass props as attributes to child components and destructure them in function parameters.
function UserCard({ name, email, avatar }) {
return (
<div>
<img src={avatar} alt={name} />
<h2>{name}</h2>
<p>{email}</p>
</div>
)
}
// Usage
<UserCard name="John Doe" email="[email protected]" avatar="profile.jpg" />
Props are passed to React components as attributes in JSX and received as the first parameter in functional components. Destructuring props directly in the function signature { name, email, avatar } provides clean access to individual properties. Props are read-only and flow down from parent to child components, enabling predictable data flow and component reusability. You can pass any JavaScript value including strings, numbers, objects, arrays, functions, and even other React components as props.
Best Practice Note:
This is the same approach we use in CoreUI React components for flexible customization and consistent API design.
Use TypeScript interfaces to define prop types: interface Props { name: string; email: string; } and provide default values with destructuring: { name = 'Anonymous', email } for robust component APIs.
