Episode 2 — React Frontend Architecture NextJS / 2.2 — React Components and Props

2.2 — Exercise Questions: React Components & Props

Practice makes permanent. Work through these questions to cement your understanding of components, props, rendering lists, keys, and reusable component design.

How to Use This Material

  1. Try before you look — attempt each question without revisiting the notes first.
  2. Write real code — open your editor for hands-on questions. Mental walkthroughs aren't enough.
  3. Predict outputs — for prediction questions, write your answer BEFORE running the code.
  4. Check with DevTools — use React DevTools to verify component trees and props.
  5. Time yourself — aim for 2-3 minutes per short question, 10-15 minutes per hands-on task.

2.2.a — Functional Components (Q1–Q10)

Q1. What is the minimum code required to create a valid React functional component? Write it.

Q2. What is the difference between a function declaration and an arrow function for defining a React component? Can both be exported as default?

Q3. Predict the output: What does this component render?

function App() {
  return (
    <div>
      {null}
      {undefined}
      {false}
      {true}
      {0}
      {""}
      {NaN}
    </div>
  );
}

Q4. A component returns null. Does it still mount? Does useEffect still fire?

Q5. What are the naming rules for React components? What happens if you name a component button (lowercase)?

Q6. Write a component called TimeOfDay that returns "Good Morning", "Good Afternoon", or "Good Evening" based on the current hour.

Q7. Explain the difference between default exports and named exports for components. When would you prefer each?

Q8. What is a barrel file (index.js)? Write one that re-exports three components from a components/ folder.

Q9. Is it valid to define multiple components in a single file? When is it acceptable, and when should you split them?

Q10. What does "components are just functions" mean in practice? List 3 implications of this fact.

2.2.b — Understanding Props (Q11–Q20)

Q11. What is the props object? If no props are passed to a component, what does the props parameter contain?

Q12. Write a Greeting component that accepts name and language props. It should greet in English by default, but support "es" (Spanish) and "fr" (French).

Q13. Explain the difference between <Button disabled /> and <Button disabled={false} />. What values do they pass?

Q14. What is the children prop? Write a Panel component that wraps its children in a bordered container with a title.

Q15. What does the spread operator do when used with props? Write an example of forwarding rest props to a native <input> element.

Q16. Predict what happens:

function Child(props) {
  props.name = "Modified";
  return <p>{props.name}</p>;
}

Does this work? Is this acceptable in React? Why or why not?

Q17. Explain three different ways to set default values for props. Which is recommended in 2026?

Q18. What is the difference between || and ?? when providing prop defaults? Give an example where they produce different results.

Q19. Write a component that accepts a user object prop and renders the user's name, email, and an optional avatar. Handle the case where user is undefined.

Q20. What is "prop drilling"? Draw an ASCII diagram showing a prop being passed through 4 levels of components where only the deepest one uses it.

2.2.c — Dynamic Rendering (Q21–Q30)

Q21. What is the difference between static and dynamic rendering? Give an example of each.

Q22. Write a PriceTag component that formats a number as a currency string using Intl.NumberFormat. It should accept amount, currency, and locale props.

Q23. Create a StatusBadge component that renders different colors and labels based on a status prop: "active" (green), "inactive" (gray), "pending" (yellow), "banned" (red).

Q24. What are the four main conditional rendering patterns in React? Write a one-line example of each.

Q25. Predict what renders:

function Counter({ count }) {
  return (
    <div>
      {count && <span>{count} items</span>}
    </div>
  );
}
<Counter count={0} />

Is there a bug? How would you fix it?

Q26. Write a RequireAuth component that shows its children only if a user prop is truthy, otherwise shows a "Please log in" message.

Q27. When should you use the object lookup pattern for conditional rendering instead of a switch statement or nested ternaries? Give an example.

Q28. Build a DynamicIcon component that renders different SVG icons based on a name prop using an object map.

Q29. Write a ProgressBar component that changes color based on the fill percentage: red (0-33%), orange (34-66%), green (67-100%).

Q30. What is the performance problem with creating inline objects/arrays in JSX? Show the problem and two ways to fix it.

2.2.d — Rendering Lists (Q31–Q40)

Q31. Write the code to render an array of strings ["Apple", "Banana", "Cherry"] as an unordered list.

Q32. What method does React use to render lists? Why can't you use forEach() instead of map()?

Q33. Given an array of products, write code that: filters to only in-stock items, sorts by price (low to high), and renders each as a card.

Q34. Build a GroupedList component that groups contacts by the first letter of their name and renders them with letter headers (like a phone's contact list).

Q35. What should you display when a list is empty? Write a reusable EmptyState component with an icon, title, description, and optional action button.

Q36. Write a loading skeleton for a list that shows 5 placeholder items with animated pulse effects.

Q37. Build a simple paginated list with "Previous" and "Next" buttons. Show 10 items per page with a "Showing X–Y of Z" indicator.

Q38. When should you extract a list item into its own component? List 3 specific signs that extraction is needed.

Q39. Predict what happens if you forget the return keyword inside a .map() callback with curly braces {}:

items.map(item => {
  <li>{item.name}</li>
})

Q40. Write a component that renders a nested list: a list of departments, each containing a list of employees.

2.2.e — Keys in React (Q41–Q50)

Q41. What are keys in React? Why does React need them for lists?

Q42. Explain the difference between position-based matching (no keys) and identity-based matching (with keys) when an item is removed from the beginning of a list.

Q43. List 5 examples of good keys and 3 examples of bad keys.

Q44. Predict the bug: You have a list of 3 todo items with checkboxes. Using key={index}, you check the first item and then delete it. What happens to the checkboxes?

Q45. When is it acceptable to use the array index as a key? List all the conditions that must be true.

Q46. What happens if two items in the same list have the same key? What warning does React show?

Q47. How do you use keys with React.Fragment? Why can't you use the shorthand <>...</> syntax with keys?

Q48. Explain the "key to force re-mount" pattern. Give an example where changing a component's key solves a state-not-resetting bug.

Q49. What is a composite key? When would you need one? Write a makeKey() helper function.

Q50. You access props.key inside a child component and it's undefined. Why? How do you get the same value inside the child?

2.2.f — Reusable Card Component (Q51–Q60)

Q51. Design the API (list of props) for a Card component. What are the minimum required props, and what optional props would you add?

Q52. What is the compound component pattern? Write a Card with .Header, .Body, and .Footer sub-components.

Q53. Write a clickable Card that: lifts on hover (translateY + shadow increase), responds to keyboard events (Enter/Space), and uses proper ARIA attributes.

Q54. Build a SelectableCard where clicking toggles a selected state. The selected card should have a blue border and a checkmark.

Q55. Create a CardGrid component using CSS Grid that automatically fills available space with cards of minimum 280px width.

Q56. Write a product Card that handles: missing image (show placeholder), missing price (show "Price unavailable"), out-of-stock state (gray overlay with "Out of Stock" text).

Q57. What HTML element should you use for a content card vs. a clickable card? Explain the semantic differences.

Q58. Refactor this component from a "prop explosion" to using composition:

<Card
  title="..." subtitle="..." avatar="..." image="..."
  actionLabel="..." onAction={...} badge="..." badgeColor="..."
  footer="..." headerAction={...} variant="..."
/>

Q59. Write a NotificationCard with four variants (info, success, warning, error) that shows an icon, title, message, and dismiss button.

Q60. Build a social media post Card with avatar, author name, timestamp, content text, optional image, and a like/comment/share action bar with working like toggle.

Total: 60 questions covering all 6 sub-topics of 2.2

Estimated time: 4-6 hours for all questions