React
Props
Props in React
What is it?
Props are inputs passed into a component.
Why does it exist?
Props let components be reusable with different data.
Examples
Basic
Example 1
function Greeting({ name }) {
return <p>Hello {name}</p>
}Receive props with destructuring.
Intermediate
Example 1
<Greeting name="Ava" />Pass a prop to a component.
Advanced
Example 1
function Card({ title, children }) {
return <section><h2>{title}</h2>{children}</section>
}Use children for nested content.
Common Mistakes
Common mistakes with props: 1. Mutating props inside a component 2. Forgetting to pass required props 3. Using props when state is needed
Write it once before proceeding
This helps your brain start forming the pattern.
function Greeting({ name }) { return <p>Hello {name}</p> }Props are inputs
Simple Explanation
Props are values you give a component.
Think of it like this
Like ingredients you pass into a recipe.
Tiny Example
<Greeting name="Sam" />Core Drill: Lock It In
Write the same concept 50 times to make it permanent. Your progress is saved automatically.
Repetitions0 / 50
🔒
Sign In to Unlock
Complete all 50 repetitions and lock this concept in your memory forever.