BitWithBite
React Worksheet
📦 Components & Props
SCORE___ / 20
NameClassDate
After this worksheet you can
Pass and read propsUse conditional renderingUse callback propsExplain one-way data flow📚 Quick Recap
🎯 What you'll practice: Props, destructuring, conditional rendering, and callback props.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Props flow:
2Props inside the receiving component are:
3{condition && <X/>} renders X when:
4A callback prop lets the child:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Props are destructured directly in the function .
6The ternary form for conditional rendering is condition ? A : .
7Write a component ProductCard that takes a "name" prop and renders it in an h2.
8Write the JSX to use ProductCard with name="Mug".
9Why can't a child component directly change a prop value it receives?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a CourseCard component with title, free, and onEnroll props, showing a FREE badge conditionally and calling onEnroll(title) on button click.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = signature 6 = B 7 = function ProductCard({name}){return <h2>{name}</h2>;} 8 = <ProductCard name="Mug" /> 9 = Because props are owned by the parent that passed them; React's one-directional data flow means only the parent (usually via its own state) can change what it hands down | 10 = function CourseCard({title,free,onEnroll}){return <div><h2>{title}</h2>{free && <span>FREE</span>}<button onClick={()=>onEnroll(title)}>Enroll</button></div>;}