"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", figure: "figure", h3: "h3", h4: "h4", hr: "hr", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "One of the core feature which adds power to React Ecosystem is Props. This beginners guide to master props in React explains how data flows between components." }), "\n", _jsx(_components.p, { children: "React is one of the most popular javascript library for building user interfaces. One of it's core strength lies in its ability to manage and pass data between different components using Props." }), "\n", _jsx(_components.h3, { children: "What are Props in React?" }), "\n", _jsx(_components.p, { children: "In React, Props are the objects that hold the data you want to pass from one component to another component." }), "\n", _jsx(_components.p, { children: "Props allow us to do customization in our component, by making them more flexible dynamic." }), "\n", _jsxs(_components.p, { children: ["Let me make this more clear. ", _jsx(_components.strong, { children: "Think of Prop to component as arguments passed to a function" }), "."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753362484735", alt: "react-code-snippet" }) }), "\n", _jsx(_components.p, { children: "Take a look at the above example, you'll see that data is passed to both React's Component & a function. Remember, we're not getting data, instead we're passing." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "In React Data flows in one direction" }), ", which means we can pass the data, but we cannot receive data from components. ", _jsx(_components.strong, { children: "This Hierarchy is Parent to Child only" }), ". ", _jsx(_components.em, { children: "Their are other ways too for passing data back to parent, but we'll discuss in another article." })] }), "\n", _jsx(_components.h3, { children: "Why Props are Important?" }), "\n", _jsxs(_components.p, { children: ["Well, Props play an important role in React development. ", _jsx(_components.a, { href: "https://react.dev/learn/passing-props-to-a-component", children: "Passing props to components" }), " allows us to make customization which helps in re-usability of our components. There are different important reasons listed below in points:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Props allow components to customize with different data, enabling re-usability across various scenarios." }), "\n", _jsx(_components.li, { children: "It allows passing data from parent to child component, ensuring the props communication." }), "\n", _jsx(_components.li, { children: "By using props, it allows components to remain independent and handle it's own functionality, which again helps in re-usability." }), "\n", _jsx(_components.li, { children: "Props make the code more readable and easier to maintain, as they provide clear interfaces between components." }), "\n", _jsx(_components.li, { children: "Props support dynamic behavior by passing data that may change, helping to manage state updates in an organized manner." }), "\n", _jsx(_components.li, { children: "Since props don’t involve re-creating components, they can help optimize performance by updating only necessary parts of the UI." }), "\n"] }), "\n", _jsx(_components.h3, { children: "Understanding the Parent-Child Relation in React" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753362711747", alt: "parent child relation graph" }) }), "\n", _jsxs(_components.p, { children: ["In React Components, Often form a ", _jsx(_components.strong, { children: "hierarchical tree" }), " with a parent component at the top and one or more child components nested inside."] }), "\n", _jsx(_components.p, { children: "Props facilitate communication in this structure. The Parent Component sends data to the child component to render dynamically." }), "\n", _jsx(_components.p, { children: "The parent-child relationship often mirrors real-world scenarios. E.g, Consider an online shopping app example in the above image for reference:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["The Parent Component represents a product ", _jsx(_components.strong, { children: "CategoryList" }), " below App."] }), "\n", _jsx(_components.li, { children: "The Child Component represents individual products within that category." }), "\n"] }), "\n", _jsx(_components.p, { children: "The parent passes data about the products (e.g, name, price, image, etc) which will be received by child component via props, enabling the child to display it." }), "\n", _jsx(_components.h3, { children: "Real-World Example: A Product List Application" }), "\n", _jsx(_components.p, { children: "Let's build an app that help us understand relationship between parent-child components and how props play an important role here." }), "\n", _jsx(_components.h4, { children: "Scenario" }), "\n", _jsxs(_components.p, { children: ["Imagine an online store that displays a list of products. The parent component fetches a list of products from an API (Server) and pass the relevant data to the child component for rendering. You can learn more about ", _jsx(_components.a, { href: "https://programmingly.dev/here-are-5-different-ways-to-make-api-call-in-reactjs", children: "different ways to make API call in Reactjs" }), "."] }), "\n", _jsx(_components.h4, { children: "Step 1: Setting up Parent Component and pass data" }), "\n", _jsx(_components.p, { children: "The parent component is responsible for managing data and rendering the child components. This example shows, how the parent component passes product details as props to individual product Component." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ProductItem " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./ProductItem\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " App" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " products" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Laptop\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$999\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", description: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"A high performance laptop.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Smartphone\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$499\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", description: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"A feature-rich smartphone.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "3" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Headphones\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$199\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", description: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Noise-cancelling headphones.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ];" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"App\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Product List" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " products." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "product" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "index" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{index}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " product" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{product} {" }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* Pass the product as a prop to ProductItem */" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " App;" })] })] }) }) }), "\n", _jsx(_components.h4, { children: "Step 2: Creating a Child Component" }), "\n", _jsxs(_components.p, { children: ["The Product component receives the product detail in ", _jsx(_components.code, { children: "product" }), " prop from parent components and renders the info dynamically in a UI."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "product" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* accessing the product prop from parent component */" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"product-item\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.description}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ProductItem;" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "How do Props Work Dynamically?" }), "\n", _jsx(_components.p, { children: "In the above example, Parent Component does not know how product detail is going to render. It only passes the data down to child Component. This approach has several benefits:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "You can add or remove products from the products array without altering the chid component." }), "\n", _jsx(_components.li, { children: "The structure can handle any number of products" }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "ProductItem" }), " component can be used anywhere with different data but same keys."] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Default Props" }), "\n", _jsx(_components.p, { children: "Exploring more about props, help use understand what we can achieve with Props." }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.strong, { children: "Default Prop" }), " value works same like function default argument value. ", _jsx(_components.strong, { children: "If no value is provided then the default value is used" }), "."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " UserProfile" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "name" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"Unknown\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "image" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "gender" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"product-item\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "img" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " src" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{image} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "alt" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{gender}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " UserProfile;" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "Passing Functions as Props" }), "\n", _jsxs(_components.p, { children: ["Their is no such limitation on not passing a specific type of data into props. Props allows us to pass almost any kind of data type, like, ", _jsx(_components.strong, { children: "string, numbers, boolean, array, object, json even component can be passes as prop to a component." })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Some Best Practices for using Props" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Keep Props Read Only:" }), " Avoid modifying props directly in child components."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Use De-structuring" }), ": Destructing props for cleaner and more readable code."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Validate Props:" }), " Use tools like prop-types or typescript to ensure proper data types to avoid unknown issues"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Props Drilling:" }), " Passing data to deep nested components make all of them depend on each other and destroy the re-usability of component."] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Conclusion" }), "\n", _jsx(_components.p, { children: "Props are fundamental to building a modular and reusable components in React. By passing data dynamically in a parent-child relationship, you can create flexible and scalable applications." }), "\n", _jsx(_components.p, { children: "In our real-world Example, the parent component seamlessly communicated with child component, demonstrating the power of props." }), "\n", _jsx(_components.p, { children: "By Following best practices (mentioned above) and exploring advanced concepts like default props and prop-types you can enhance the reliability and maintainability of your react applications. So, the next time you build a react app, leverage the power of props to create efficient and dynamic UI's." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };