Props Cheat Sheet (React)

Subject: React

🧩 Props Cheat Sheet (React)

🧩 Concept✅ Example / Syntax💡 Description / Notes
Passing a Prop<Greeting name="Shubham" />Send data from parent to child using attributes
Accessing Propsprops.name or { name }In child component, read props via props object or destructure
Multiple Props<Profile name="Shubham" age={24} job="Dev" />Pass multiple props to a single component
Destructuring Propsfunction Profile({ name, age }) {}Cleaner syntax than props.name, props.age
Default Propsfunction Button({ label = "Click Me" }) {}Provide default values for optional props
Props are Read-only❌ props.name = "New"Props cannot be changed inside the component
Using props in loops{users.map(user => <UserCard name={user.name} />)}Pass props dynamically in lists
Function as Prop<Button onClick={handleClick} />You can pass functions as props
Props in Class Comp.this.props.nameUse this.props in class-based components
Children Prop<Card><p>Inside card</p></Card>Anything between component tags is passed as props.children
Prop Types (optional)Component.propTypes = { name: PropTypes.string }Validate prop types using prop-types library
Boolean Props<Button disabled /> = <Button disabled={true} />Boolean props can be passed without value
Next: State