Module Knowledge Check

You've covered JSX, components, props, and state. Time to put it to the test.

This short quiz reviews the key ideas from this module. Take your time, read each question carefully, and use the explanations afterwards to fill any gaps.

You need to score 70% or higher to complete this lesson and finish the module. You can retake the quiz as many times as you like - your best score counts.

Quick Review

Before taking the quiz, make sure you can explain:

• why component names are capitalized
• how props flow from parent to child
• why props should not be mutated
• when state is more appropriate than props
• how children supports composition
• why list keys should be stable
• why copying props into state can create stale UI

Practice Challenge

Build a small CourseCard system.

Requirements:

• CourseCard accepts title, level, and children.
• CourseCard renders a card with the title and level.
• The parent passes a paragraph and a button as children.
• Add a CourseList component that renders multiple courses from an array with stable keys.
• Avoid storing derived values such as the number of courses in separate state.

Starter data:

1
2
3
4

const courses = [
  { id: "react", title: "React Fundamentals", level: "Beginner" },
  { id: "js", title: "JavaScript Fundamentals", level: "Beginner" },
];

Recap

Components are reusable functions that return JSX. Props configure components, state stores changing UI data, children enable composition, and stable keys preserve list identity.