React Practice Questions — APAD Midterm 2

Ten exam-style questions written in the format of the published practice sheet (Question 1: "Projects Managed by Your Team"). Every question is solvable using only patterns that appear in the instructor's react-class-code/src files — the professor said mastery of that code guarantees a 100%, so nothing here reaches outside it.

Layout

practice-questions/
├── QUESTIONS.md          ← all ten prompts in one place (print this, attempt blind)
├── COVERAGE.md           ← which class file each question drills
├── qNN-name/
│   ├── PROMPT.md         ← the question, exam wording
│   ├── RUBRIC.md         ← self-grading checklist (5 pts) — read AFTER attempting
│   ├── starter/          ← the provided App.js driver + skeleton files with TODOs
│   └── solution/         ← worked solution

How to practice

npx create-react-app my-first-app
cd my-first-app

Then per question:

1. Copy qNN/starter/* into src/ (overwriting App.js). Q10 also needs data.json copied into public/.
2. Set a timer — 20 minutes for one question is a realistic exam pace.
3. Fill in the skeleton files. Never edit App.js — the driver defines the props your component must accept, exactly like the real exam.
4. npm start and check the behavior described under "Expected".
5. Only then open RUBRIC.md, grade yourself, and diff against solution/.

Re-usable scaffold: ../midterm-2-exam-kit/reference-app is already on the class stack (react 18.2.0 / react-scripts 5.0.1) if you'd rather not wait on CRA.

Difficulty order

Warm-up → exam-realistic → stretch:

Order	Question	Why
1	Q1 Course Catalog	props + map + keys only, no state
2	Q2 Vote Counter	first useState, props-driven behavior
3	Q7 Rating Picker	functions as props / lifting state up
4	Q3 Team Roster	controlled input + add/delete
5	Q5 Student Table	table composition + controlled select
6	Q8 Inventory	object state, Object.entries, Set
7	Q6 Signup Form	every input type at once
8	Q4 Hardware Checkout	closest to the real practice question + team project
9	Q9 Thermostat	class component, this.setState, binding
10	Q10 Fetch List	stretch: useEffect + fetch

If you only have time for three, do Q4, Q3, Q7 — those cover the parent-owns-state / child-calls-callback / map-with-keys triangle that the published practice question is built from.

Exam-day reminders baked into these questions

• File names and component names must match the question exactly.
• export default X; at the bottom of every file; import X from './X'; with no braces.
• Never modify the provided App.js.
• Every .map() over components needs a key.
• onClick={handler} — not onClick={handler()}.
• Controlled inputs need both value and onChange.
• Never mutate state: [...list, item], { ...obj, [k]: v }, new Set(prev).