← Back to Week 7

Problem Set 07

Problem Set 07

Topics: React Components, Props, State, Events, and Interactive Data

Problem A: Code Changes

Built a table of US Senators using React component composition
Created SenatorTable, TableHeader, and SenatorRow as named exports
Used .map() to render arrays of components with key props
Passed senator data down through props from App to child components

Problem B: Code Changes

Built a pet adoption app with useState() for managing pet data
Implemented adoptPet callback prop to lift state changes up from PetCard
Created BreedNav and AboutNav navigation components
Used conditional rendering to show "(Adopted)" status on pet cards

Problem C: Code Changes

Built FIFA World Cup data explorer with filtering and sorting
Managed multiple state variables for sort criteria, sort order, team filter, and runner-up toggle
Implemented controlled form with <select> and checkbox inputs tied to state
Used Lodash _.sortBy() for column sorting with 3-way toggle (asc/desc/none)

Key Concepts

Component Composition: Breaking UI into reusable components with props
Named vs Default Exports: export function vs export default
State Management: useState() for dynamic data that triggers re-renders
Callback Props: Passing handler functions to children to modify parent state
Controlled Forms: Inputs with value and onChange tied to state
Derived Data: Filtering and sorting arrays computed from state

Resources