Props and children
📚 What are Props? Props (properties) are the inputs that a parent passes to a child component. They are read-only inside the child. Any JavaScript value can be a prop: strings, numbers, arrays, objects, functions, even other components. The special children prop holds whatever JSX is placed betwee…
Appy Says…
Props are how React components communicate. Without props, every Button would look the same and every Card would show the same content. With props, one component becomes endlessly flexible.
What are Props?
Props (properties) are values passed from a parent component to a child component. They're read-only in the child — props flow down, never up.
- •Pass:
<Button label="Save" disabled={false} onClick={handleSave} /> - •Receive:
function Button({ label, disabled, onClick }) { ... } - •Or as an object:
function Button(props) { return <button>{props.label}</button> } - •children: content nested inside tags:
<Card><p>Content</p></Card> - •Receive children:
function Card({ children }) { return <div>{children}</div>; } - •Default values:
function Button({ label = 'Click me' }) { ... }
Think of it like Roblox tool settings
When you place a Roblox tool in a game, you configure it — speed, damage, sound. Props are those configuration values. Each time you use a component, you pass different props to configure its appearance and behaviour.
How It Works
- •1. Parent passes props as JSX attributes:
<UserCard name={user.name} avatar={user.img} /> - •2. Child destructures from the props parameter:
function UserCard({ name, avatar }) { ... } - •3. Props are read-only in the child — never do
props.name = 'new' - •4. Any JS value can be a prop: string, number, boolean, function, object, React element
- •5.
childrenis a special prop — content between the opening and closing tags - •6. Spread props:
<Button {...buttonProps} />— passes all keys as individual props
Real-World Examples
- •
<Avatar src={user.photo} size={40} alt={user.name} /> - •
<Modal title="Confirm"><p>Are you sure?</p></Modal>— children pattern - •
<Button variant="danger" onClick={handleDelete}>Delete</Button> - •React Router's
<Link to="/home">Home</Link>uses both props and children
Key Facts
- •Props are immutable in the child — only the parent can change what it passes
- •
childrencan be any JSX — text, elements, even other components - •TypeScript adds prop type safety with interfaces:
interface ButtonProps { label: string; onClick: () => void; } - •Prop drilling (passing props through many layers) is solved by React Context or state managers
Watch Out!
Never modify props inside a component. Props are read-only by design — mutating them causes unpredictable bugs because React's rendering model assumes props are immutable inputs. If you need local change, copy the value into state first.
Remember
Props flow down from parent to child. They're read-only. Use children for composable wrapper components. Destructure in the function signature for clean code.
What You Learned
- •Props pass data from parent to child as JSX attributes
- •Destructure in function params; children prop wraps nested content
- •Unlocks: reusable, configurable components — the foundation of React architecture
Key Facts
- →Props are immutable in the child — only the parent can change what it passes
- →
childrencan be any JSX — text, elements, even other components - →TypeScript adds prop type safety with interfaces:
interface ButtonProps { label: string; onClick: () => void; } - →Prop drilling (passing props through many layers) is solved by React Context or state managers
Real-World Examples
Remember
Props flow down from parent to child. They're read-only. Use children for composable wrapper components. Destructure in the function signature for clean code.
Quick Quiz
children is?