• In React, props (short for properties) is a parameter of React.createElement(type, props, …children) that is an Object or null.
• Props are used to Pass Data from One Component to Another — Typically Parent Component to Child Component.
• The props object holds key-value pairs, where each key is a prop name, and the value is the data you want to pass.
• Purpose of Props :
• - Share data across the component hierarchy.
• - Reuse components efficiently.
• - Customize components dynamically.

# Passing props to Pure React Object

# Corresponding JSX

• in JSX passing props just looklike adding attributes to HTML element.

in above snaps, there are className, onClick, disabled, type are pre-define props

# Types of prop

there are two types of prop in react

• Pre-define(i.e key, children, src, className, id, etc).
• User-define : defining custom key=value pair to share desire Data to component.

# User Define Props.

• User can define there custom props as a pre-define props.

# all the props of corresponding HTML element render as Attribute

• “div” use mytitle as attribute. (note for element atrributes are always in lowercase).

## How can we use “Custom” prop

• we can use “Custom prop” in our created “Custom Component”.
• let us create our custom MyCard component and use props there.
• Step 1 : create a function MyCard and accept a parameter as props.
• Step 2 : create a reactElement object cardElement
• Step 3 : pass the MyCard function and props in it React.createElement()
• Step 4 : log the props parameter in MyCard

• look createElement invoke MyCard function with props object.
• now we can use this props object inside our MyCard function or Component.

# Corresponding JSX

# Children Prop

• what we pass as 3rd parameter of React.createElement()
• that also pass as children in props object.
• Note: we not create any children key=value pair this is pass my React.createElement() method

• see at line 12, “hello” the 3rd parameter is passed as children in props

# Corresponding JSX

• In JSX, children pass as between the opening and closing tag.
• we can also pass Nested JSX that is all stored in children prop.

# Props with Destructuring syntax

• we are usually see at function componet ({title}) this kind on syntax.
• this is object destructuring simply.

• Destructuring is a javascript concept.
• by the help of destructuring we can read only those prop from props object that we want.

# Props with Spread (…)Operator Syntax.

• this … three dots are know as spread operator in javascript.
• we are also some where in react code {…props} this type of thing.
• that is acutally spread operator.
• Example :
• we are creating a Custom button Component PrimaryBtn.

• look in PrimaryBtn Component we pass three props(onClick,style and children (by nesting)) that are for button.
• instead of passing one by one prop to <button> component .
• we pass all the props at once by use {…props} syntax to <button> component inside PrimaryBtn.
• Now we can pass any number of props to <PrimaryBtn> component that are all the props directly pass to <button> component.

🧩 Mini Project: Profile Card Component

Let’s build a small Profile Card App that demonstrates how props work — including children, destructuring, and the spread operator.

💼 Goal:

• Build a ProfileCard component that accepts:
• name, title, avatar (props)
• Custom content using children
• Render multiple ProfileCards using an array of data

💡 Concepts Practiced

• Passing props to custom components
• Using children for custom inner content
• Applying object destructuring in functional components

📌 Optional Challenge

Enhance it further:

• Add a button inside each card using the spread operator
• Add onClick behavior like “Follow” or “Send Message”
• Add conditional styling using props (e.g., isOnline)