How to pass props in React
Łukasz HoleczekFollow Łukasz Holeczek on GitHubConnect with Łukasz Holeczek on LinkedInFollow Ł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.
functionUserCard({name,email,avatar}){return(<div><imgsrc={avatar}alt={name}/><h2>{name}</h2><p>{email}</p></div>)}// Usage<UserCardname="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.
Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.
About the Author
Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.
With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.
Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.
Learn more about CoreUI’s solutions and see how your business can benefit from working with us.
