Lab 4

Click Event

Passing Data on Event

Passing Functions

Broken Counter: 7

Counter: 7

Boolean State Variables

Done

Yay! Done

String State Variables

John

Date State Variables

"2026-09-21T21:25:21.508Z"

2026-09-21

Object State Variables

{
  "name": "Peter",
  "age": 24
}

Array State Variable

  • 1
  • 2
  • 3
  • 4
  • 5

Counter 123

Counter 123

Prop Drilling

Parent count: 0

Child

This component never uses count itself. It only forwards props.

Grandchild

Count: 0

Addition Calculator

Enter two numbers and navigate using either buttons (programmatic) or links (declarative):

Programmatic navigation (using router.push):

Declarative navigation (using Link):

5 + 10 → Query Params (Link)5 + 10 → Path Params (Link)

useEffect

The document title updates after React paints, whenever name or count changes.

React Context

Two siblings share one counter without the parent passing props through the middle.

Reader: 7

Writer

Zustand

Zustand Counter: 7

Zustand Todo List

Redux Toolkit

Hello Redux

Hello Redux

Redux Counter: 7

Add Redux

Sum: 0

Redux Todo List

  • Learn HTML
  • Learn CSS
  • Learn JavaScript