By the end of this chapter you will understand state management in React applications well enough to decide where a value belongs, how it is updated, and how the user interface stays in sync. You will handle user input with controlled components, use the useState hook to manage component-level state, explore two-way data binding for form elements, and implement React forms with text fields, checkboxes, date pickers, and other input types. You will also handle side effects with the useEffect hook, add state management to the Kambaz user interface, and render dynamic content based on application state. The lab walk-throughs teach Redux Toolkit as optional literacy — the store, actions, reducers, useSelector, and useDispatch — so you can follow existing codebases, while Zustand holds the Kambaz lists you will keep building in later chapters.

More specifically, you will be able to:

• Handle user events in Client Components and pass both data and functions into event handlers.
• Declare local state with useState for numbers, booleans, strings, dates, objects, and arrays.
• Bind form fields to state with value and onChange so the UI and the data stay in sync.
• Share state by declaring it in a parent both components can reach, and recognize when that sharing becomes prop drilling.
• Encode optional or structural data in the URL with query parameters and path parameters.
• Share the signed-in user with React Context from the Kambaz layout, without turning Context into a database of courses.
• Put courses and modules in a Zustand store and subscribe from any Client Component.
• Read a Redux Toolkit slice, store, selector, and dispatch so you can follow existing codebases.
• Run side effects with useEffect after React paints.
• Add, update, and delete Kambaz courses and modules from a shared Zustand store so Dashboard and Home stay in sync.

Those objectives are best achieved by building along with the narration — each Lab 4 component and Kambaz store as it appears — rather than reading first and coding later. Implement the component, import it from the Lab 4 page, and confirm the browser displays as shown before you move on. Glance at the Lab 4 checklist in §4.8 and the Kambaz checklist in §4.11 so the expected coverage is visible from the start. Those lists are recaps, not a reason to skip ahead: work through each section, then use them to confirm what stuck.

This section presents React examples that program the browser, interact with the user, and generate dynamic HTML. Use the same project you worked on in the last chapter. After you work through the examples you will apply the same skills while creating a stateful Kambaz on your own. Using Visual Studio Code, Cursor, or your favorite IDE, open the project you created in previous chapters. Include all the work in the Labs section as part of your final deliverable. Do your work on a new branch called a4 and deploy it to Vercel as a branch deployment of the same name, the same way earlier chapters deployed a2 and a3.

HTML and CSS describe what a screen looks like. As users interact with the application, they generate a stream of events that describe what the user did. Events change the state of the application and the user interface updates to reflect the new state. To practice managing state and user interaction, create a new lab directory called lab4 in the app/labs directory.

mkdir app/labs/lab4

In Next.js, files run on the server by default and cannot handle clicks, typing, or dialogs. Those events need the browser, so Lab 4 starts with "use client". Create app/labs/lab4/page.tsx with that directive and a heading. You will import each new component under that heading as you go, the same implement-import-confirm cadence you used throughout Lab 3:

"use client";

export default function Lab4() {
  return (
    <div id="wd-lab4">
      <h2>Lab 4</h2>
    </div>
  );
}

Add a link to the new lab in both app/labs/page.tsx and app/labs/TOC.tsx, the same two files you updated in earlier chapters. Style the Labs table of contents with the existing Tailwind CSS classes from Lab 2, not a separate Bootstrap pill bar. Confirm you can reach http://localhost:3000/labs/lab4 from the Labs table of contents before continuing. A coverage checklist for Lab 4 is in §4.8 — use it after you have walked through the samples, not instead of building them as you read. Those lab files are throwaway drills — one idea per component. Kambaz, later in this chapter, is the application you keep.

Install the two store libraries now so later sections can import them. Zustand is the store Kambaz will use for courses and modules; Redux Toolkit is the literacy store you will rebuild the Hello, Counter, Add, and Todos examples with in §4.6. Use Lab 2's Tailwind classes for buttons and fields throughout these exercises:

npm install zustand @reduxjs/toolkit react-redux

Users interact with the Web application user interface by clicking their mouse, typing at their keyboards, and, on mobile devices, tapping, swiping, and pinching at the screen. As they interact with the graphical user interface, they generate a stream of events that need to be handled by interpreting the user intent, modifying the Web application state, and rerendering the user interface to reflect the new state so the user can see that their actions are having the intended effect. HTML and CSS describe how a screen looks; the event stream describes what the user did. A click, a keystroke, and a form submit are events, and React listens with attributes such as onClick and onChange. The next few sections consider the various types of events users generate and how they can be handled. The next three subsections cover click events, passing data when handling events, and passing functions as parameters.

The onClick attribute declares a function that handles clicks. Those listeners only run in the browser, so the file that uses them starts with "use client" — the same directive §3.6.1 introduced for pathname-aware components. In Next.js, JavaScript files execute on the server by default and cannot interact with the user. User interaction such as mouse clicks, keyboard typing, and dialog windows all need to talk to the browser and the computer hardware, and therefore need to run on the client. Files tagged with "use client" are not executed on the server for that interaction; they are sent to the browser to execute there. To practice handling a click event, create the ClickEvent component below and import it from the Lab 4 page. Confirm the browser displays as shown and that clicking the button opens an alert.

"use client";

const hello = () => {
  alert("Hello World!");
};

export default function ClickEvent() {
  return (
    <div id="wd-click-event">
      <h2>Click Event</h2>
      <button
        type="button"
        onClick={hello}
        id="wd-onclick-hello"
        className="rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Click Hello
      </button>
      <hr />
    </div>
  );
}

The handler is a function reference: onClick={hello}, not onClick={hello()}. Parentheses would call hello while React is rendering, before anyone clicks, and the alert would fire as soon as the page loaded. Passing the function by name tells React to invoke it later, when the click actually happens. The PDF also shows wrapping several statements in an arrow when one click should call more than one function — onClick={() => { hello(); lifeIs("Great!"); }} — which you will use as soon as a handler needs an argument or more than one line of code. Click the button and confirm an alert appears:

When handling an event, sometimes we need to pass parameters to the function that handles the event — which item to delete, which message to show, which two numbers to add. Write a function that takes those arguments, then wrap the call in a closure, an arrow function that React can invoke later, so the argument is not evaluated during render. If you do not wrap the function call inside a closure, you risk creating an infinite loop or at least running the handler on every render: onClick={add(2, 3)} calls add immediately and passes its return value, which is undefined, to onClick. To practice passing data when handling events, create the PassingDataOnEvent component below and import it from the Lab 4 page. Confirm the browser displays as shown.

"use client";

const hello = () => {
  alert("Hello World!");
};

const lifeIs = (good: string) => {
  alert(good);
};

export default function PassingDataOnEvent() {
  return (
    <div id="wd-passing-data-on-event">
      <h2>Passing Data on Event</h2>
      <button
        type="button"
        onClick={hello}
        id="wd-pass-data-click"
        className="me-2 rounded bg-yellow-400 px-3 py-1.5 text-sm font-medium"
      >
        Pass Data
      </button>
      <button
        type="button"
        onClick={() => lifeIs("Life is Good!")}
        id="wd-pass-data-parameter-click"
        className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Pass Data Parameter
      </button>
      <hr />
    </div>
  );
}

The first button still uses a function reference because hello needs no arguments. The second button wraps lifeIs("Life is Good!") in an arrow so the string is only passed when the user clicks. Use that arrow syntax, and not onClick={lifeIs("Life is Good!")}, whenever the handler needs data. Click both buttons and confirm each alert matches the argument you passed:

In JavaScript, functions can be treated as any other constant or variable, including passing them as parameters to other functions. A child can invoke behavior the parent owns if the parent passes the function as a prop. The example below passes function sayHello to component PassingFunctions. When the button is clicked, sayHello is invoked. That is why the Lab 4 page itself is a Client Component: the parent creates the function in the browser and hands the child a reference. To practice passing functions as parameters, create the PassingFunctions component below, declare a sayHello callback on the Lab 4 page, pass it as theFunction={sayHello}, and confirm it works as expected.

"use client";

export default function PassingFunctions({
  theFunction,
}: {
  theFunction: () => void;
}) {
  return (
    <div id="wd-passing-functions">
      <h2>Passing Functions</h2>
      <button
        type="button"
        onClick={theFunction}
        id="wd-pass-functions-click"
        className="rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Invoke the Function
      </button>
      <hr />
    </div>
  );
}

On the Lab 4 page the callback is a small function that alerts "Hello from Lab 4". The child does not know what the function does; it only knows the type () => void and invokes it on click. That same pattern will later let a todo item ask a store to delete a row without owning the array itself. Click the button in the demo and confirm the parent's alert appears:

Web applications implemented with React can be considered as a set of functions that transform a set of data structures into an equivalent user interface. The collection of data structures and values is often referred to as an application state. So far we have explored React applications that transform a static data set into a static user interface. We will now consider how the state can change over time as users interact with the user interface and how those state changes can be represented on the screen. Users interact with an application by clicking, dragging, and typing, filling out forms, clicking buttons, and scrolling through data. As they interact they create a stream of events that can be handled by a set of event-handling functions, often referred to as controllers. Controllers handle user events and convert them into changes in the application's state. Applications render those state changes into corresponding changes in the user interface. In Web applications, user interface changes consist of changes to the DOM.

Updating the DOM with JavaScript is slow and can degrade the performance of Web applications. React optimizes the process by creating a virtual DOM, a more compact and efficient version of the real DOM. When React renders something on the screen, it first updates the virtual DOM, and then converts these changes into updates to the actual DOM. To avoid unnecessary and slow updates, React only updates the real DOM if there have been changes to the virtual DOM. We can participate in this process of state change and DOM updates by using the useState hook. The hook is used to declare state variables that we want to affect the DOM rendering. The next subsections declare integer, boolean, string, date, object, and array state variables with that same hook. The syntax of the hook is a pair:

const [stateVariable, setStateVariable] = useState(initialStateValue);

The useState hook takes as argument the initial value of a state variable and returns an array whose first item is the initialized state variable and whose second item is a mutator function that allows updating it. The array destructor syntax is commonly used to bind these items to local constants as shown above. The mutator function not only changes the value of the state variable, but it also notifies React that it should check if the state has caused changes to the virtual DOM and therefore make changes to the actual DOM. A plain let can change in memory and the heading will not move, because React does not know to paint again. To illustrate the point of the virtual DOM and how changes in state affect the actual DOM, create CounterBroken.tsx first so the failure is visible. A count variable is initialized and rendered on the screen. Buttons Up and Down update the variable in memory, but the heading stays at 7 because as far as React is concerned there have been no changes to the virtual DOM.

"use client";

export default function CounterBroken() {
  let count = 7;
  return (
    <div id="wd-counter-broken">
      <h2>Broken Counter: {count}</h2>
      <button
        type="button"
        onClick={() => {
          count++;
        }}
        id="wd-counter-broken-up-click"
        className="me-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Up
      </button>
      <button
        type="button"
        onClick={() => {
          count--;
        }}
        id="wd-counter-broken-down-click"
        className="rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Down
      </button>
      <hr />
    </div>
  );
}

For the DOM to be updated as expected, we need to tell React that changes to a particular variable are indeed relevant to changes in the DOM. To do this, use the useState hook to declare the state variable, and update it using the mutator function. Calling the setter queues a new render with the new value. Implement the Counter component below, import it in Lab 4, and confirm it works as expected. Do the same with the rest of the exercises that follow.

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(7);
  return (
    <div id="wd-counter">
      <h2>Counter: {count}</h2>
      <button
        type="button"
        onClick={() => setCount(count + 1)}
        id="wd-counter-up-click"
        className="me-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Up
      </button>
      <button
        type="button"
        onClick={() => setCount(count - 1)}
        id="wd-counter-down-click"
        className="rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Down
      </button>
      <hr />
    </div>
  );
}

Click Up and Down and confirm the heading changes. The mutator is called with the next integer, React compares the virtual DOM to the previous tree, and the heading is the part that actually writes to the real DOM. That is the same integer you will rebuild with Context, Zustand, and Redux so the three APIs stay comparable:

The useState hook works with all JavaScript data types and structures including booleans, integers, strings, numbers, arrays, and objects. The exercise below illustrates using the hook with boolean state variables. The variable is used to hide or show a DIV as well as render a checkbox as checked or not. Also note the use of onChange on the checkbox to set the value of the state variable: bind checked to the current boolean and toggle it when the user clicks. Boolean state is a natural fit for checkboxes and for markup that should appear only when a flag is true. To practice with boolean state, create the BooleanStateVariables component below and import it from the Lab 4 page. Confirm the browser displays as shown.

"use client";

import { useState } from "react";

export default function BooleanStateVariables() {
  const [done, setDone] = useState(true);
  return (
    <div id="wd-boolean-state-variables">
      <h2>Boolean State Variables</h2>
      <p>{done ? "Done" : "Not done"}</p>
      <label className="flex items-center gap-2">
        <input
          type="checkbox"
          checked={done}
          onChange={() => setDone(!done)}
          id="wd-boolean-checkbox"
        />
        Done
      </label>
      {done && <div className="mt-2 rounded bg-yellow-100 p-2">Yay! Done</div>}
      <hr />
    </div>
  );
}

The paragraph chooses its text with a ternary on done. The checkbox is a controlled input: checked={done} shows the current flag, and onChange writes the opposite value back into state. The yellow banner uses the same short-circuit you practiced in §3.2.4: when done is true the DIV appears; when it is false the right-hand side never runs. Toggle the checkbox and confirm the heading, the box, and the banner all move together:

The StringStateVariables exercise illustrates using useState with string state variables. A controlled input uses value for what the field shows and onChange to write each keystroke back into state. The input field's value is initialized to the firstName state variable. The onChange attribute invokes the setFirstName mutator to update the state variable. The e.target.value contains the value of the input field and is used to update the current value of the state variable. Using defaultValue would leave the field uncontrolled after the first render — the heading and the input could drift apart. Lab 1 used defaultValue because there was no state yet; from here on, bind value. To practice with string state, create the StringStateVariables component below and import it from the Lab 4 page. Confirm the browser displays as shown.

"use client";

import { useState } from "react";

export default function StringStateVariables() {
  const [firstName, setFirstName] = useState("John");
  return (
    <div id="wd-string-state-variables">
      <h2>String State Variables</h2>
      <p>{firstName}</p>
      <input
        className="w-full max-w-sm rounded border border-neutral-300 px-3 py-1.5"
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
        id="wd-first-name"
      />
      <hr />
    </div>
  );
}

This is two-way data binding for a text field: the paragraph reads firstName, the input writes it on every keystroke, and React rerenders so both stay in sync. Type in the input and watch the paragraph update:

The DateStateVariable component illustrates how to work with date state variables. The startDate state variable is initialized to the current date using new Date(), which has a string representation that is not what an HTML date input expects. HTML date inputs speak YYYY-MM-DD. A JavaScript Date does not. The dateObjectToHtmlDateString function converts a Date object into that format so the field's value attribute matches what the browser picker requires. Changes in the date field are handled by the onChange attribute, which constructs a new Date from e.target.value and updates the state with the setStartDate mutator. To practice with date state, create the DateStateVariable component below and import it from the Lab 4 page. Confirm the browser displays as shown.

"use client";

import { useState } from "react";

function dateObjectToHtmlDateString(date: Date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

export default function DateStateVariable() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div id="wd-date-state-variables">
      <h2>Date State Variables</h2>
      <h3>{JSON.stringify(startDate)}</h3>
      <h3>{dateObjectToHtmlDateString(startDate)}</h3>
      <input
        type="date"
        className="rounded border border-neutral-300 px-3 py-1.5"
        value={dateObjectToHtmlDateString(startDate)}
        onChange={(e) => setStartDate(new Date(e.target.value))}
        id="wd-start-date"
      />
      <hr />
    </div>
  );
}

The first heading shows the raw date object through JSON.stringify; the second shows the YYYY-MM-DD string the picker understands. Pick a new date and confirm both headings update. Assignment due dates and course start dates in Kambaz will use this same conversion later:

The ObjectStateVariable component demonstrates how to work with object state variables. We declare a person object state variable with initial property values name and age. The object is rendered on the screen using JSON.stringify so you can see the changes in real time. Two input fields are initialized to the object's person.name string property and the object's person.age number property. As the user types, the onChange attribute updates the object's property using the setPerson mutator. The object is updated by creating a new object copied from the previous value using the spread operator { ...person }, and then overriding the name or age property with the new target.value. When the state value is an object, replace it with a new one rather than editing the old one in place. Writing person.name = e.target.value would edit the old object in place, and React may skip the render because the reference did not change. To practice with object state, create the ObjectStateVariable component below and import it from the Lab 4 page. Confirm the browser displays as shown.

"use client";

import { useState } from "react";

export default function ObjectStateVariable() {
  const [person, setPerson] = useState({ name: "Peter", age: 24 });
  return (
    <div id="wd-object-state-variables">
      <h2>Object State Variables</h2>
      <pre>{JSON.stringify(person, null, 2)}</pre>
      <input
        className="mb-2 block w-full max-w-sm rounded border border-neutral-300 px-3 py-1.5"
        value={person.name}
        onChange={(e) => setPerson({ ...person, name: e.target.value })}
        id="wd-person-name"
      />
      <input
        type="number"
        className="block w-full max-w-sm rounded border border-neutral-300 px-3 py-1.5"
        value={person.age}
        onChange={(e) =>
          setPerson({ ...person, age: parseInt(e.target.value) || 0 })
        }
        id="wd-person-age"
      />
      <hr />
    </div>
  );
}

Each keystroke builds a new object: the spread copies every field you did not touch, and the named field overrides the one you did. The age field parses the string from the number input so the property stays a number. Type in either field and watch the JSON preview update:

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

The ArrayStateVariable component demonstrates how to work with array state variables. An array of integers is declared as a state variable, and functions addElement and deleteElement add and remove elements. We render the array as a map of line items in an unordered list. We render the array's value and a Delete button for each element. Clicking Delete calls deleteElement and passes the index of the element we want to remove. That function computes a new array filtering out the element by its position and updates the state variable to contain a new array without the element we filtered out. Clicking Add Element invokes addElement, which computes a new array with a copy of the previous array spread at the beginning and a new random element at the end. Arrays follow the same replace-don't-mutate rule as objects: compute a new array, append with spread, and remove with filter. The Delete button receives the index through an arrow so it is not called during render. To practice with array state, create the ArrayStateVariable component below, import it from the Lab 4 page, and confirm it works as expected. Style the list with Tailwind so the output renders as shown.

"use client";

import { useState } from "react";

export default function ArrayStateVariable() {
  const [array, setArray] = useState([1, 2, 3, 4, 5]);
  const addElement = () => {
    setArray([...array, Math.floor(Math.random() * 100)]);
  };
  const deleteElement = (index: number) => {
    setArray(array.filter((_item, i) => i !== index));
  };
  return (
    <div id="wd-array-state-variables">
      <h2>Array State Variable</h2>
      <button
        type="button"
        onClick={addElement}
        id="wd-add-element-click"
        className="mb-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Add Element
      </button>
      <ul className="m-0 max-w-xs list-none p-0">
        {array.map((item, index) => (
          <li
            key={`${item}-${index}`}
            className="mb-1 flex items-center justify-between rounded border border-neutral-200 bg-green-50 px-3 py-1"
          >
            <span>{item}</span>
            <button
              type="button"
              onClick={() => deleteElement(index)}
              id={`wd-delete-element-${index}-click`}
              className="rounded bg-red-600 px-2 py-0.5 text-sm font-medium text-white"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
      <hr />
    </div>
  );
}

Add a few random numbers, then delete one from the middle, and confirm the list redraws without mutating the old array in place. Kambaz courses and modules will use this same spread and filter pattern inside a Zustand store:

State can be shared between components by passing references to state variables and the functions that update them. The PDF places sharing state at 4.2.2.8 and URL encoding at 4.2.3, first query parameters and then path parameters. Those labs are here as their own section so the problem is visible before Redux, Context, and Zustand offer to solve it.

The useState hook belongs to the component that calls it, so a sibling or a nested screen cannot read that value on its own. To share it you can move the value and its setter up to a parent both can reach and pass them down as props, encode the data in the URL of the next page, or keep it in a store that any Client Component can import. The exercises below work through the first two of those — sharing through a parent, and encoding in the URL — so that when Context and Zustand show up, you already know the problem they are meant to solve. Although passing references is sufficient as a general approach among a few components, it is fraught with challenges when building larger applications: every rename of the prop touches files that only existed to forward it. That is the moment a store starts to earn its keep.

"use client";

import { useState } from "react";
import ChildStateComponent from "./ChildStateComponent";

export default function ParentStateComponent() {
  const [counter, setCounter] = useState(123);
  return (
    <div id="wd-parent-state">
      <h2>Counter {counter}</h2>
      <ChildStateComponent counter={counter} setCounter={setCounter} />
      <hr />
    </div>
  );
}

"use client";

export default function ChildStateComponent({
  counter,
  setCounter,
}: {
  counter: number;
  setCounter: (counter: number) => void;
}) {
  return (
    <div id="wd-child-state">
      <h3>Counter {counter}</h3>
      <button
        type="button"
        onClick={() => setCounter(counter + 1)}
        id="wd-increment-child-state-click"
        className="me-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Increment
      </button>
      <button
        type="button"
        onClick={() => setCounter(counter - 1)}
        id="wd-decrement-child-state-click"
        className="rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Decrement
      </button>
    </div>
  );
}

"use client";

import { useState } from "react";

function Grandchild({
  count,
  setCount,
}: {
  count: number;
  setCount: (n: number) => void;
}) {
  return (
    <div id="wd-prop-drill-grandchild" className="rounded border border-neutral-200 p-3">
      <h4>Grandchild</h4>
      <p>Count: {count}</p>
      <button
        type="button"
        onClick={() => setCount(count + 1)}
        className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Increment in grandchild
      </button>
    </div>
  );
}

function Child({
  count,
  setCount,
}: {
  count: number;
  setCount: (n: number) => void;
}) {
  return (
    <div id="wd-prop-drill-child" className="mb-2 rounded border border-neutral-200 p-3">
      <h4>Child</h4>
      <p>This component never uses count itself. It only forwards props.</p>
      <Grandchild count={count} setCount={setCount} />
    </div>
  );
}

export default function PropDrilling() {
  const [count, setCount] = useState(0);
  return (
    <div id="wd-prop-drilling">
      <h2>Prop Drilling</h2>
      <p>Parent count: {count}</p>
      <Child count={count} setCount={setCount} />
      <hr />
    </div>
  );
}

"use client";

import { useSearchParams } from "next/navigation";

export default function QueryCalculator() {
  const searchParams = useSearchParams();
  const aRaw = searchParams.get("a") || "0";
  const bRaw = searchParams.get("b") || "0";
  const a = parseFloat(aRaw);
  const b = parseFloat(bRaw);
  const sum = a + b;
  return (
    <div id="wd-query-calculator">
      <h1>Calculator – Query Parameters</h1>
      <p>Raw query values (already decoded by Next.js):</p>
      <p>
        a = <code>{aRaw}</code>
      </p>
      <p>
        b = <code>{bRaw}</code>
      </p>
      <h2 className="text-green-700">Sum = {sum}</h2>
    </div>
  );
}

import { Suspense } from "react";
import QueryCalculator from "./QueryCalculator";

export default function QueryCalculatorPage() {
  return (
    <Suspense fallback={<p>Loading calculator…</p>}>
      <QueryCalculator />
    </Suspense>
  );
}

"use client";

import { useParams } from "next/navigation";

export default function PathCalculator() {
  const params = useParams();
  const aRaw = params.a as string;
  const bRaw = params.b as string;
  const a = parseFloat(aRaw);
  const b = parseFloat(bRaw);
  const sum = a + b;
  return (
    <div id="wd-path-calculator">
      <h1>Calculator – Path Parameters</h1>
      <p>Raw path segments (already decoded by Next.js):</p>
      <p>
        a = <code>{aRaw}</code>
      </p>
      <p>
        b = <code>{bRaw}</code>
      </p>
      <h2 className="text-green-700">Sum = {sum}</h2>
    </div>
  );
}

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function UrlEncoding() {
  const [a, setA] = useState("5");
  const [b, setB] = useState("10");
  const router = useRouter();
  const baseUrl = "/labs/lab4/url-encoding";

  const goToQueryVersion = () => {
    const params = new URLSearchParams();
    params.set("a", a);
    params.set("b", b);
    router.push(`${baseUrl}/query-params?${params.toString()}`);
  };

  const goToPathVersion = () => {
    const safeA = encodeURIComponent(a);
    const safeB = encodeURIComponent(b);
    router.push(`${baseUrl}/path-params/${safeA}/${safeB}`);
  };

  return (
    <div id="wd-url-encoding" className="max-w-xl">
      <h2>Addition Calculator</h2>
      <p>
        Enter two numbers and navigate using either buttons (programmatic) or
        links (declarative):
      </p>
      <input
        type="number"
        value={a}
        onChange={(e) => setA(e.target.value)}
        className="mb-2 block w-full rounded border border-neutral-300 px-3 py-1.5"
        id="wd-url-a"
      />
      <input
        type="number"
        value={b}
        onChange={(e) => setB(e.target.value)}
        className="mb-3 block w-full rounded border border-neutral-300 px-3 py-1.5"
        id="wd-url-b"
      />
      <h4>Programmatic navigation (using router.push):</h4>
      <button
        type="button"
        onClick={goToQueryVersion}
        className="mb-2 w-full rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
        id="wd-url-query-programmatic"
      >
        {a} + {b} → Query Params (programmatic)
      </button>
      <button
        type="button"
        onClick={goToPathVersion}
        className="mb-3 w-full rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
        id="wd-url-path-programmatic"
      >
        {a} + {b} → Path Params (programmatic)
      </button>
      <h4>Declarative navigation (using Link):</h4>
      <Link
        href={`${baseUrl}/query-params?a=${encodeURIComponent(a)}&b=${encodeURIComponent(b)}`}
        className="mb-2 block w-full rounded bg-blue-600 px-3 py-1.5 text-center text-sm font-medium text-white no-underline"
        id="wd-url-query-link"
      >
        {a} + {b} → Query Params (Link)
      </Link>
      <Link
        href={`${baseUrl}/path-params/${encodeURIComponent(a)}/${encodeURIComponent(b)}`}
        className="mb-2 block w-full rounded bg-blue-600 px-3 py-1.5 text-center text-sm font-medium text-white no-underline"
        id="wd-url-path-link"
      >
        {a} + {b} → Path Params (Link)
      </Link>
      <hr />
    </div>
  );
}

React Context provides a way to share state across the component tree without manually passing props through every level, the problem known as prop drilling that §4.3.2 just made visible. Unlike Redux, React Context is built directly into React. A parent publishes a value that any descendant can read without listing it on every component in between. That is the right tool for a theme, the signed-in user, or the current course id — data that is stable and read in a subtree. It is the wrong tool for a list that every keystroke rewrites: every consumer re-renders when the value changes. Put todos, modules, and courses in Zustand instead. Kambaz will use this same provider pattern for who is signed in (§4.10.5), not for the course list.

The pattern is a context, a provider that holds useState, and a hook that throws if you forget the provider. You create the context with createContext, wrap the subtree that should see the value in a Provider, and read the value with useContext or a small custom hook that checks the provider is present. To practice, we will reimplement the Counter using React Context, then you will rebuild the todo list on your own so you can feel the difference between Context and the stores that follow.

"use client";

import { createContext, useContext, useState, type ReactNode } from "react";

type CounterContextValue = {
  count: number;
  setCount: (count: number) => void;
};

const CounterContext = createContext<CounterContextValue | null>(null);

export function CounterProvider({ children }: { children: ReactNode }) {
  const [count, setCount] = useState(7);
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
}

export function useCounterContext() {
  const value = useContext(CounterContext);
  if (!value) {
    throw new Error("useCounterContext must be used inside CounterProvider");
  }
  return value;
}

"use client";

import { useCounterContext } from "./CounterContext";

export default function ContextCounterRead() {
  const { count } = useCounterContext();
  return (
    <div id="wd-context-counter-read">
      <h3>Reader: {count}</h3>
    </div>
  );
}

"use client";

import { useCounterContext } from "./CounterContext";

export default function ContextCounterWrite() {
  const { count, setCount } = useCounterContext();
  return (
    <div id="wd-context-counter-write">
      <h3>Writer</h3>
      <button
        type="button"
        onClick={() => setCount(count + 1)}
        id="wd-context-up-click"
        className="me-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Up
      </button>
      <button
        type="button"
        onClick={() => setCount(count - 1)}
        id="wd-context-down-click"
        className="rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Down
      </button>
    </div>
  );
}

"use client";

import { CounterProvider } from "./CounterContext";
import ContextCounterRead from "./ContextCounterRead";
import ContextCounterWrite from "./ContextCounterWrite";

export default function ContextExamples() {
  return (
    <div id="wd-context-examples">
      <h2>React Context</h2>
      <p>
        Two siblings share one counter without the parent passing props
        through the middle.
      </p>
      <CounterProvider>
        <ContextCounterRead />
        <ContextCounterWrite />
      </CounterProvider>
      <hr />
    </div>
  );
}

Zustand is a lightweight, fast, and scalable state management library for React applications. Often described as "bear-bones" state management — the library's own joke about bears, not a typo for bare — it provides a simple hook-based API that eliminates much of the boilerplate found in alternatives like Redux. You create a store using the create function from Zustand, and the resulting hook lets you read and update state anywhere in your app without needing a Provider component or complex setup. There is no provider to wrap the tree, no action types, and no boilerplate slice file unless you want one. Components subscribe to the fields they read, so a todo title change does not have to re-render a counter. This is the store Kambaz will use for courses and modules in §4.10, while the signed-in user lives in Context. First, install Zustand from the root of your project if you have not already — the install command in §4.2 already included it:

npm install zustand

The library's name is Zustand — German for state — and that is the spelling this book uses from here on.

"use client";

import { create } from "zustand";

type CounterStore = {
  count: number;
  up: () => void;
  down: () => void;
};

export const useCounterStore = create<CounterStore>((set) => ({
  count: 7,
  up: () => set((state) => ({ count: state.count + 1 })),
  down: () => set((state) => ({ count: state.count - 1 })),
}));

"use client";

import { useCounterStore } from "./counterStore";

export default function ZustandCounter() {
  const count = useCounterStore((state) => state.count);
  const up = useCounterStore((state) => state.up);
  const down = useCounterStore((state) => state.down);
  return (
    <div id="wd-zustand-counter">
      <h3>Zustand Counter: {count}</h3>
      <button
        type="button"
        onClick={up}
        id="wd-zustand-up-click"
        className="me-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Up
      </button>
      <button
        type="button"
        onClick={down}
        id="wd-zustand-down-click"
        className="rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Down
      </button>
    </div>
  );
}

"use client";

import { create } from "zustand";

export type Todo = {
  id: string;
  title: string;
  done: boolean;
};

type TodoStore = {
  todos: Todo[];
  todo: Todo;
  setTodo: (todo: Todo) => void;
  addTodo: (todo: Todo) => void;
  deleteTodo: (id: string) => void;
  updateTodo: (todo: Todo) => void;
};

const emptyTodo: Todo = { id: "-1", title: "Learn Zustand", done: false };

export const useTodoStore = create<TodoStore>((set) => ({
  todos: [
    { id: "1", title: "Learn HTML", done: true },
    { id: "2", title: "Learn CSS", done: true },
    { id: "3", title: "Learn JavaScript", done: false },
  ],
  todo: emptyTodo,
  setTodo: (todo) => set({ todo }),
  addTodo: (todo) =>
    set((state) => ({
      todos: [...state.todos, { ...todo, id: crypto.randomUUID() }],
      todo: emptyTodo,
    })),
  deleteTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((t) => t.id !== id),
    })),
  updateTodo: (todo) =>
    set((state) => ({
      todos: state.todos.map((t) => (t.id === todo.id ? todo : t)),
      todo: emptyTodo,
    })),
}));

"use client";

import { useTodoStore } from "./todoStore";

export default function ZustandTodoForm() {
  const todo = useTodoStore((state) => state.todo);
  const setTodo = useTodoStore((state) => state.setTodo);
  const addTodo = useTodoStore((state) => state.addTodo);
  const updateTodo = useTodoStore((state) => state.updateTodo);
  return (
    <div id="wd-zustand-todo-form" className="mb-3 flex flex-wrap gap-2">
      <input
        className="rounded border border-neutral-300 px-3 py-1.5"
        value={todo.title}
        onChange={(e) => setTodo({ ...todo, title: e.target.value })}
        id="wd-zustand-todo-title"
      />
      <button
        type="button"
        onClick={() => addTodo(todo)}
        id="wd-zustand-add-todo-click"
        className="rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Add
      </button>
      <button
        type="button"
        onClick={() => updateTodo(todo)}
        id="wd-zustand-update-todo-click"
        className="rounded bg-yellow-400 px-3 py-1.5 text-sm font-medium"
      >
        Update
      </button>
    </div>
  );
}

"use client";

import { useTodoStore, type Todo } from "./todoStore";

export default function ZustandTodoItem({ todo }: { todo: Todo }) {
  const setTodo = useTodoStore((state) => state.setTodo);
  const deleteTodo = useTodoStore((state) => state.deleteTodo);
  return (
    <li
      id={`wd-zustand-todo-${todo.id}`}
      className="mb-1 flex items-center justify-between rounded border border-neutral-200 px-3 py-1"
    >
      <label className="flex items-center gap-2">
        <input type="checkbox" checked={todo.done} readOnly />
        <span className={todo.done ? "line-through" : undefined}>{todo.title}</span>
      </label>
      <span className="flex gap-2">
        <button
          type="button"
          onClick={() => setTodo(todo)}
          className="rounded bg-yellow-400 px-2 py-0.5 text-sm"
        >
          Edit
        </button>
        <button
          type="button"
          onClick={() => deleteTodo(todo.id)}
          className="rounded bg-red-600 px-2 py-0.5 text-sm font-medium text-white"
        >
          Delete
        </button>
      </span>
    </li>
  );
}

"use client";

import { useTodoStore } from "./todoStore";
import ZustandTodoForm from "./ZustandTodoForm";
import ZustandTodoItem from "./ZustandTodoItem";

export default function ZustandTodoList() {
  const todos = useTodoStore((state) => state.todos);
  return (
    <div id="wd-zustand-todo-list">
      <h3>Zustand Todo List</h3>
      <ZustandTodoForm />
      <ul className="m-0 max-w-lg list-none p-0">
        {todos.map((todo) => (
          <ZustandTodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </div>
  );
}

"use client";

import ZustandCounter from "./ZustandCounter";
import ZustandTodoList from "./ZustandTodoList";

export default function ZustandExamples() {
  return (
    <div id="wd-zustand-examples">
      <h2>Zustand</h2>
      <ZustandCounter />
      <ZustandTodoList />
      <hr />
    </div>
  );
}

The PDF's 4.3 is Managing Application State with Redux: install, a Hello reducer, a counter that dispatches events, passing data to a reducer, then a todo list split into form / item / list. Those labs are here so the spine is complete. You will not port Kambaz to Redux — Zustand holds courses and modules, Context holds who is signed in — but you should be able to read a slice when you meet one. The PDF implements Kambaz courses, modules, and account as Redux reducers; this book teaches the same screens and CRUD with Zustand stores and an Account Context.

The useState hook is used to maintain the state within a component. State can be shared across components by passing references to state variables and mutators to other components. Although this approach is sufficient as a general approach to share state among multiple components, it is fraught with challenges when building larger, more complex applications. The downside of using useState across multiple components is that it creates an explicit dependency between these components, making it hard to refactor them as requirements change. The solution is to eliminate the dependency using a library such as Redux. This section explores the Redux library to manage state that is meant to be used across a large set of components, and even an entire application. We will keep using useState to manage state within individual components, but use Redux here to practice application-level state — the same role Zustand plays for Kambaz later in the chapter.

To learn about Redux, we will create a Redux examples component that will contain several simple Redux examples. Create the files under app/labs/lab4/redux/ as shown in the subsections that follow. Import the new Redux examples component into the Lab 4 component so we can see how it renders as we add new examples. Reload the browser and confirm the new component renders as expected. The finished examples page wraps Hello, Counter, Add, and Todos in a single Provider; we will build the store up one reducer at a time.

npm install @reduxjs/toolkit react-redux

"use client";
import { createSlice } from "@reduxjs/toolkit";
const helloSlice = createSlice({
  name: "hello",
  initialState: { message: "Hello Redux" },
  reducers: {},
});
export default helloSlice.reducer;

"use client";

import { configureStore } from "@reduxjs/toolkit";
import helloReducer from "./helloReducer";
import counterReducer from "./counterReducer";
import addReducer from "./addReducer";
import todosReducer from "./todosReducer";

export const store = configureStore({
  reducer: {
    helloReducer,
    counterReducer,
    addReducer,
    todosReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

"use client";
import { useSelector } from "react-redux";
import type { RootState } from "./store";

export default function HelloRedux() {
  const { message } = useSelector((state: RootState) => state.helloReducer);
  return (
    <div id="wd-hello-redux">
      <h3>Hello Redux</h3>
      <h4>{message}</h4>
    </div>
  );
}

"use client";

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 7 },
  reducers: {
    up: (state) => {
      state.count += 1;
    },
    down: (state) => {
      state.count -= 1;
    },
  },
});

export const { up, down } = counterSlice.actions;
export default counterSlice.reducer;

"use client";

import { useDispatch, useSelector } from "react-redux";
import { down, up } from "./counterReducer";
import type { RootState } from "./store";

export default function CounterRedux() {
  const { count } = useSelector((state: RootState) => state.counterReducer);
  const dispatch = useDispatch();
  return (
    <div id="wd-redux-counter">
      <h3>Redux Counter: {count}</h3>
      <button
        type="button"
        onClick={() => dispatch(up())}
        id="wd-redux-up-click"
        className="me-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Up
      </button>
      <button
        type="button"
        onClick={() => dispatch(down())}
        id="wd-redux-down-click"
        className="rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white"
      >
        Down
      </button>
    </div>
  );
}

"use client";
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
const addSlice = createSlice({
  name: "add",
  initialState: { sum: 0 },
  reducers: {
    add: (state, action: PayloadAction<{ a: number; b: number }>) => {
      state.sum = action.payload.a + action.payload.b;
    },
  },
});
export const { add } = addSlice.actions;
export default addSlice.reducer;

"use client";

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { add } from "./addReducer";
import type { RootState } from "./store";

export default function AddRedux() {
  const [a, setA] = useState(12);
  const [b, setB] = useState(23);
  const { sum } = useSelector((state: RootState) => state.addReducer);
  const dispatch = useDispatch();
  return (
    <div id="wd-add-redux">
      <h3>Add Redux</h3>
      <input
        type="number"
        id="wd-add-redux-a"
        className="me-2 rounded border border-neutral-300 px-2 py-1"
        value={a}
        onChange={(e) => setA(Number(e.target.value))}
      />
      <input
        type="number"
        id="wd-add-redux-b"
        className="me-2 rounded border border-neutral-300 px-2 py-1"
        value={b}
        onChange={(e) => setB(Number(e.target.value))}
      />
      <button
        type="button"
        id="wd-add-redux-click"
        className="rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
        onClick={() => dispatch(add({ a, b }))}
      >
        Add Redux
      </button>
      <h4 id="wd-add-redux-sum">Sum: {sum}</h4>
    </div>
  );
}

"use client";

import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

export type ReduxTodo = { id: string; title: string };

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    todos: [
      { id: "1", title: "Learn HTML" },
      { id: "2", title: "Learn CSS" },
      { id: "3", title: "Learn JavaScript" },
    ] as ReduxTodo[],
  },
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      state.todos.push({ id: crypto.randomUUID(), title: action.payload });
    },
    deleteTodo: (state, action: PayloadAction<string>) => {
      state.todos = state.todos.filter((t) => t.id !== action.payload);
    },
    updateTodo: (state, action: PayloadAction<ReduxTodo>) => {
      const todo = state.todos.find((t) => t.id === action.payload.id);
      if (todo) todo.title = action.payload.title;
    },
  },
});

export const { addTodo, deleteTodo, updateTodo } = todosSlice.actions;
export default todosSlice.reducer;

"use client";

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTodo, deleteTodo, updateTodo } from "./todosReducer";
import type { RootState } from "./store";

export default function ReduxTodos() {
  const { todos } = useSelector((state: RootState) => state.todosReducer);
  const dispatch = useDispatch();
  const [title, setTitle] = useState("Learn Mongo");
  const [editingId, setEditingId] = useState<string | null>(null);
  return (
    <div id="wd-redux-todos">
      <h3>Redux Todo List</h3>
      <div className="mb-2 flex flex-wrap gap-2">
        <input
          id="wd-redux-todo-title"
          className="rounded border border-neutral-300 px-2 py-1"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <button
          type="button"
          id="wd-redux-add-todo"
          className="rounded bg-green-600 px-3 py-1.5 text-sm text-white"
          onClick={() => {
            if (editingId) {
              dispatch(updateTodo({ id: editingId, title }));
              setEditingId(null);
            } else {
              dispatch(addTodo(title));
            }
            setTitle("Learn Mongo");
          }}
        >
          {editingId ? "Update" : "Add"}
        </button>
      </div>
      <ul className="m-0 max-w-lg list-none p-0">
        {todos.map((todo) => (
          <li
            key={todo.id}
            className="mb-1 flex items-center justify-between rounded border border-neutral-200 px-3 py-1"
          >
            <span>{todo.title}</span>
            <span className="flex gap-2">
              <button
                type="button"
                className="rounded bg-yellow-400 px-2 py-0.5 text-sm"
                onClick={() => {
                  setTitle(todo.title);
                  setEditingId(todo.id);
                }}
              >
                Edit
              </button>
              <button
                type="button"
                className="rounded bg-red-600 px-2 py-0.5 text-sm text-white"
                onClick={() => dispatch(deleteTodo(todo.id))}
              >
                Delete
              </button>
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

"use client";
import { Provider } from "react-redux";
import { store } from "./store";
import HelloRedux from "./HelloRedux";
import CounterRedux from "./CounterRedux";
import AddRedux from "./AddRedux";
import ReduxTodos from "./ReduxTodos";

export default function ReduxExamples() {
  return (
    <Provider store={store}>
      <div id="wd-redux-examples">
        <h2>Redux Toolkit</h2>
        <HelloRedux />
        <CounterRedux />
        <AddRedux />
        <ReduxTodos />
        <hr />
      </div>
    </Provider>
  );
}

One of the learning objectives for this chapter is to handle side effects with the useEffect hook. Rendering should compute JSX from props and state — that is the transformation from application state into a user interface that §4.2.4 described. Talking to the document, starting a timer, subscribing to a window event, or asking a network for data is a side effect: it reaches outside the component's return value. Those operations belong in useEffect, which runs after React paints, not during the render that computes the tree.

If you set document.title or call fetch directly in the component body, the work runs every time React renders, including renders that had nothing to do with the title or the request. Putting the same work in useEffect lets you say when it should run. The dependency array lists values that should re-run the effect; when any of those values change, React runs the function again after the next paint. An empty array would run only after the first paint, which is the pattern later chapters use to load data when a screen first appears. Omitting the array altogether would run after every paint, which is rarely what you want.

Kambaz Profile will use the same hook: if there is no current user the screen redirects to Sign in; otherwise it copies the current user into a local form, and a useEffect with an empty dependency array calls that fetch-profile function after the first paint. Chapter 5 will use the same hook to retrieve welcome messages, objects, and arrays from an HTTP server when a lab component loads. This section practices the hook in isolation so those later calls are not the first time you have seen it. To practice side effects, create the Effect component below and import it from the Lab 4 page. Confirm the browser displays as shown, then look at the browser tab title as you type and click.

"use client";

import { useEffect, useState } from "react";

export default function Effect() {
  const [name, setName] = useState("Kambaz");
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `${name} — clicked ${count}`;
  }, [name, count]);

  return (
    <div id="wd-use-effect">
      <h2>useEffect</h2>
      <p>
        The document title updates after React paints, whenever{" "}
        <code>name</code> or <code>count</code> changes.
      </p>
      <input
        className="mb-2 block w-full max-w-sm rounded border border-neutral-300 px-3 py-1.5"
        value={name}
        onChange={(e) => setName(e.target.value)}
        id="wd-effect-name"
      />
      <button
        type="button"
        onClick={() => setCount(count + 1)}
        className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white"
        id="wd-effect-count-click"
      >
        Clicked {count}
      </button>
      <hr />
    </div>
  );
}

The effect reads name and count and writes a string onto document.title. Because both values are listed in the dependency array, typing in the field or clicking the button schedules a new paint and then a new title. The input is a controlled string; the button is the same integer mutator you have been using since the counter. The new idea is only when the title write runs: after the paint, and only when one of those two values changed. Type in the field or click the button, then look at the browser tab title. Import Effect from the Lab 4 page and confirm the tab title tracks the field and the click count:

When you later fetch courses or a profile, the effect will look the same: a function that talks to the outside world, and an array that says when to talk. An empty array means once, after the screen first appears. An array with a course id means again whenever that id changes. Keep the fetch itself out of the render path so a parent rerender does not fire a new request.

Use this checklist to confirm Lab 4 covers every sample in §4.2–§4.7. Each item points back to the section where you built the worked example. Build in order as you read — this list is for checking coverage, not a substitute for the walkthroughs. As you read each section, implement the component, import it from the Lab 4 page, and confirm the browser displays as shown before you tick the matching item here. Each topic is listed once, with Lab, On your own, and With AI nested as a/b/c when that section has those blocks.

1. Lab 4 page (§4.2)
   1. Lab component — Create the Lab 4 Client Component page and link it from Labs and the Labs TOC.
2. Click events (§4.2.1)
   1. Lab component — Handle a click with onClick and "use client".
   2. On your own — In ClickEvent.tsx, add a second button with its own id that alerts a greeting that includes your name.
   3. With AI — Add a sample goodbye click handler (wd-onclick-goodbye) — leave your named greeting as yours.
3. Passing data on events (§4.2.2)
   1. Lab component — Pass data into an event with an arrow wrapper.
   2. On your own — Add a third button that passes a different string of your choosing into lifeIs.
   3. With AI — Add a sample extra string button — leave your personal string as yours.
4. Passing functions (§4.2.3)
   1. Lab component — Pass a function from parent to child.
   2. On your own — Pass a second function from page.tsx that alerts your name, and add a second button in PassingFunctions that calls it.
   3. With AI — Add a sample extra function button — leave your personal handler as yours.
5. let vs useState (§4.2.4)
   1. Lab component — Contrast a broken let counter with useState.
   2. On your own — Add a Reset button that sets the counter back to 7.
   3. With AI — Add a sample reset button (wd-counter-reset-click) — leave your personal button as yours.
6. Boolean, string, date, object, and array state (§4.2.5–§4.2.9)
   1. Lab component — Bind boolean, string, date, object, and array state.
   2. On your own — Complete each On your own: a second boolean, lastName, endDate, city on the person object, and a Clear array button.
   3. With AI — Complete each section's With AI extra in §4.2.5–§4.2.9.
7. Shared state and prop drilling (§4.3.1–§4.3.2)
   1. Lab component — Move shared state to a parent and show prop drilling.
   2. On your own — Complete each section's On your own in §4.3.1–§4.3.2.
   3. With AI — Complete each section's With AI extra in §4.3.1–§4.3.2.
8. Query and path parameters (§4.3.3)
   1. Lab component — Encode two numbers as query parameters and as path parameters.
   2. On your own — Add a third number c in the form and URL (path and query).
   3. With AI — Add a sample third-number field — leave your personal c as yours.
9. React Context (§4.4)
   1. Lab component — Share a counter with React Context.
   2. On your own — Complete the On your own in §4.4.1 and the Context todo list in §4.4.2.
   3. With AI — Complete each section's With AI extra in §4.4.1–§4.4.2.
10. Zustand (§4.5)
    1. Lab component — Rebuild the counter and a todo list with Zustand.
    2. On your own — Complete the On your own in §4.5.2.
    3. With AI — Complete the With AI extra in §4.5.2.
11. Redux Toolkit (§4.6)
    1. Lab component — Rebuild Hello, the counter, Add with a payload, and a todo list with Redux Toolkit.
    2. On your own — Complete the On your own in §4.6.2 and split ReduxTodos in §4.6.4.
    3. With AI — Complete the With AI extra in §4.6.2.
12. useEffect (§4.7)
    1. Lab component — Update the document title with useEffect.
    2. On your own — Log name and count to the console from the same effect so you can see when it runs.
    3. With AI — Add a sample console.log(name, count) in the existing effect — do not add a second useEffect for your personal log.

Pause and test the client-state topics from this chapter. The practice quiz draws 10 items — "use client", event wrappers, useState, controlled value/onChange, spreading objects and arrays, moving state to a parent vs drilling props, query vs path parameters, when Context is the wrong store, Zustand selectors, Redux dispatch, and useEffect dependencies. It is a self-check, not part of your course grade. Misses link back to the subsection you should reread; each new attempt draws a different 10.

The current Kambaz implementation reads data from a collection of objects we combined into a database in §3.9.2 — courses, modules, assignments, users, and enrollments. Those arrays are dynamically rendered in Dashboard, Home, Modules, Assignments, and People. The data is still static, and the Kambaz implementation is still a set of functions that transform that snapshot into a corresponding user interface. Change a title in JSON, reload, and the screen changes with it, without rewriting a card by hand. Because the files do not change while the app runs, Add, Edit, and Delete do nothing, and a module you create on Modules never shows up on Home. Each screen is reading a fixed snapshot. In this section we will use the component and application state management skills from the labs — events, useState, React Context, and Zustand — to refactor Kambaz so we can create new courses, modules, and assignments, then see those changes on every screen that reads the same lists.

Chapter 3 made Kambaz data driven: the dashboard, modules, and assignments are no longer static markup you copy and paste for every course. You iterate over a data structure such as arrays of courses, modules, or lessons, and the UI is computed from that data. State is how that computed UI can change over time — the same loops and maps, but the arrays can grow, shrink, and rename as the user interacts with the application. The labs gave you a chance to learn those skills one at a time, and now they go together so you can actually build something: a Kambaz that changes as the user works. The PDF implements these lists as Redux reducers. This book puts the same arrays in Zustand so any Client Component can subscribe without a provider around the tree. The screens and buttons are the ones in the PDF. A coverage checklist is in §4.11 — work through each screen as you read, then use the list to confirm you did everything. It is a recap, not a reason to skip ahead.

As discussed in the labs, there are several options for maintaining state, such as useState, Context, Zustand, and Redux. It is important to understand where each is appropriate, both in general and in Kambaz.

useState belongs in the component that owns a value, or a parent that shares it with a few children. A counter, a form draft, a dialog that is open or closed — those stay local. In Kambaz that is the course you are typing before Add, the hamburger that hides Course Navigation, the module name in the editor: UI that one screen cares about, not the shared lists. If you put the published courses array in Dashboard useState alone, Add, Edit, and Delete will work on that page and nowhere else. Home and the course layout would still be reading the JSON file, so a course you just created would have no name in the breadcrumb.

Context lets a parent publish a value that any descendant can read without passing props through every layer. That fits a value that changes rarely, such as a theme or who is signed in. It is a poor place for courses and modules. Those arrays change whenever the user adds, edits, or deletes, and when a Context value changes, every component that reads it re-renders. Typing a new course on Dashboard would refresh Home, Modules, and anything else subscribed to that context.

We will use Context in Kambaz for the signed-in user. Who is signed in changes at Sign in and Sign out, not while someone types a course name, so wrapping the Kambaz layout in a Provider is a reasonable cost. Sign in, Profile, Dashboard, and Account Navigation all sit under that layout, so they can read currentUser without passing it as a prop. We will not put courses or modules in that same context.

We could have put currentUser in Zustand too. Local useState plus Zustand for everything shared would have worked — it would even have been simpler, with no Provider to wrap. We are using both so you practice each on a use that fits: Context for a stable value the tree needs, Zustand for the lists many screens mutate.

Zustand is an external store you import as a hook — no Provider to wrap the tree. Components subscribe to the slices they need, so Dashboard and Home can add, edit, and delete the same courses array without living under one parent. That is how Kambaz will hold courses and modules. You could instead lift the courses array to a parent of both Dashboard and the course layout, but that parent is already the Kambaz layout, and stuffing every shared list into layout props quickly becomes unreadable. A store keeps the arrays next to the functions that change them.

Redux Toolkit solves the same problem Zustand does — shared application state — but it takes more pieces to wire together: slices, a Provider, and dispatch. We are skipping Redux for Kambaz. It is mentioned here only for historical purposes: many existing apps still use it, and the lab counter is enough to read that code. Zustand already holds the lists. Context already holds who is signed in.

"use client";

import { create } from "zustand";
import coursesJson from "../database/courses.json";

export type Course = (typeof coursesJson)[number];

const emptyCourse: Course = {
  _id: "0",
  name: "New Course",
  number: "New Number",
  startDate: "2023-09-10",
  endDate: "2023-12-15",
  department: "D123",
  credits: 4,
  description: "New Description",
  image: "/images/reactjs.jpg",
};

type CoursesStore = {
  courses: Course[];
  addCourse: (course: Course) => void;
  deleteCourse: (courseId: string) => void;
  updateCourse: (course: Course) => void;
};

export const useCoursesStore = create<CoursesStore>((set) => ({
  courses: coursesJson,
  addCourse: (course) =>
    set((state) => ({
      courses: [
        ...state.courses,
        { ...emptyCourse, ...course, _id: crypto.randomUUID() },
      ],
    })),
  deleteCourse: (courseId) =>
    set((state) => ({
      courses: state.courses.filter((course) => course._id !== courseId),
    })),
  updateCourse: (course) =>
    set((state) => ({
      courses: state.courses.map((c) => (c._id === course._id ? course : c)),
    })),
}));

export { emptyCourse };

4.10.2 Dashboard Create, Edit, and Delete

Slides

Now that the courses array lives in the Zustand store, refactor Dashboard to use that store instead of a local courses useState. Dashboard still has to be a Client Component because it calls store hooks and keeps a local form draft. The published list comes from the store, but the form still needs a local course draft — that is one-screen UI state, so useState is enough. Add, Update, Edit, and Delete call store functions: Edit copies a card into the form, and Update writes that draft back by _id. To practice wiring the dashboard to the store, update app/(kambaz)/dashboard/page.tsx as shown below and import the store functions from coursesStore.ts. Confirm the published grid still renders the seeded courses before you click anything.

Dashboardapp/(kambaz)/dashboard/page.tsxCopy

"use client";

import { useState } from "react";
import "@/app/labs/lab2/tailwind/utilities.css";
import CourseCard from "./CourseCard";
import {
  emptyCourse,
  useCoursesStore,
  type Course,
} from "../store/coursesStore";

export default function Dashboard() {
  const courses = useCoursesStore((state) => state.courses);
  const addCourse = useCoursesStore((state) => state.addCourse);
  const deleteCourse = useCoursesStore((state) => state.deleteCourse);
  const updateCourse = useCoursesStore((state) => state.updateCourse);
  const [course, setCourse] = useState<Course>(emptyCourse);

  return (
    <div id="wd-dashboard">
      <h1 id="wd-dashboard-title">Dashboard</h1>
      <hr />
      <h5 className="flex flex-wrap items-center gap-2">
        New Course
        <button
          type="button"
          className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white"
          id="wd-add-new-course-click"
          onClick={() => addCourse(course)}
        >
          Add
        </button>
        <button
          type="button"
          className="rounded bg-yellow-400 px-3 py-1.5 text-sm font-medium"
          id="wd-update-course-click"
          onClick={() => updateCourse(course)}
        >
          Update
        </button>
      </h5>
      <input
        className="mb-2 mt-2 block w-full max-w-xl rounded border border-neutral-300 px-3 py-1.5"
        value={course.name}
        onChange={(e) => setCourse({ ...course, name: e.target.value })}
        id="wd-course-name"
      />
      <textarea
        className="mb-3 block w-full max-w-xl rounded border border-neutral-300 px-3 py-1.5"
        rows={3}
        value={course.description}
        onChange={(e) =>
          setCourse({ ...course, description: e.target.value })
        }
        id="wd-course-description"
      />
      <hr />
      <h2 id="wd-dashboard-published">Published Courses ({courses.length})</h2>
      <hr />
      <div
        id="wd-dashboard-courses"
        className="grid grid-cols-1 gap-8 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
      >
        {courses.map((c) => (
          <CourseCard
            key={c._id}
            {...c}
            onEdit={() => setCourse(c)}
            onDelete={() => deleteCourse(c._id)}
          />
        ))}
      </div>
    </div>
  );
}

The store selectors replace the old local courses array and the setCourses helpers you might have sketched first.addCourse, deleteCourse, and updateCourse are the store functions from §4.10.1. The local course state is only the form: typing a name should not rewrite every card until you click Add or Update. The next three subsections walk through the Add form, the Delete button, and the Edit / Update path so you can confirm each control in the browser before you move on.

4.10.2.1 Creating New Courses

To create new courses, the Add button invokes addCourse with the current form draft. The store function copies that draft, overrides _id with crypto.randomUUID(), and appends the new course at the end of the courses array. The button does not take an argument in its click handler beyond the draft already in state — onClick={() => addCourse(course)} — so you do not wrap a second function that forgets to pass the object. Style Add as a blue Tailwind button and give it id wd-add-new-course-click so the control is easy to find in the document.

The target Add row looks like Figure 4.10.2a. After you bind the form, it looks like Figure 4.10.2b:

Convert the course constant into state so the fields can change and force a redraw of the form. Add an input for the course name and a textarea for the description, each bound to the matching property on the draft. At first you can set value={course.name} and value={course.description} so the fields show the placeholder text from emptyCourse. Then add onChange attributes that update each field with the same object-spread pattern as §4.2.8: setCourse({ ...course, name: e.target.value }) for the title and the same shape for description. Confirm the form shows the values of the course state variable as you type. Confirm you can type a title, click Add, and see a new card appear and the published count go up. Each card can keep the same sample image, or you can render course.image if you added image properties to courses.json in Chapter 3. The card still needs Delete and Edit, which the next two subsections add.

4.10.2.2 Deleting a Course

Now implement deleting courses by adding a Delete button to each card. The button invokes deleteCourse and passes the _id of the course to remove. The store function filters that course out of the courses array and leaves the others in place. Use the Dashboard and CourseCard samples as an example, and confirm that you can remove courses. After a successful delete the published count decreases and the card is gone; the other cards keep their titles and links.

The button sits inside a Link that navigates to the course Home screen, so you must call event.preventDefault() or the card navigates away before the course disappears. Pass the click through to onDelete so Dashboard can call deleteCourse(c._id) without the card importing the store. Style Delete as a red Tailwind button and give it id wd-delete-course-click. The Delete control looks like Figure 4.10.2c:

Confirm in the browser that clicking Delete removes that course and does not open /courses/…/home. Confirm that clicking Go still navigates. If Delete navigates, the preventDefault call is missing or the handler is on the wrong element.

4.10.2.3 Editing a Course

Now implement editing an existing course by adding an Edit button to each card. Clicking Edit should copy that card into the course form state so the name and description fields show the selected course. Prevent the Link's default navigation the same way Delete does, then call setCourse(c). Confirm that clicking Edit on a course copies that course into the form.

Add an Update button next to Add so the selected course can be written back with the values in the edited fields. Update calls updateCourse(course), which maps over the store and replaces the object whose _id matches the draft. Confirm you can select a course, change the name and description, and click Update, and that the original card's title and description change while its _id and link stay the same. After Edit, the form and the card should match Figure 4.10.2d:

To practice the card buttons, update CourseCard so it accepts onEdit and onDelete and wires both clicks through preventDefault. Confirm Edit fills the form and Delete removes the card:

CourseCardapp/(kambaz)/dashboard/CourseCard.tsxCopy

"use client";

import Link from "next/link";
import Image from "next/image";

export default function CourseCard({
  _id,
  name,
  description,
  image,
  onEdit,
  onDelete,
}: {
  _id: string;
  name: string;
  description: string;
  image: string;
  onEdit: () => void;
  onDelete: () => void;
}) {
  return (
    <div className="wd-dashboard-course w-[300px] max-w-full overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-sm">
      <Link
        href={`/courses/${_id}/home`}
        className="wd-dashboard-course-link block text-neutral-900 no-underline"
      >
        {/* image, title, description */}
        <button type="button">Go</button>
        <button
          type="button"
          id="wd-edit-course-click"
          onClick={(event) => {
            event.preventDefault();
            onEdit();
          }}
        >
          Edit
        </button>
        <button
          type="button"
          id="wd-delete-course-click"
          onClick={(event) => {
            event.preventDefault();
            onDelete();
          }}
        >
          Delete
        </button>
      </Link>
    </div>
  );
}

The live dashboard below is the same component as http://localhost:3000/dashboard. Add a course, confirm the published count increases, Edit a title, Update, then Delete. Because the array lives in Zustand, a course you add here is the same object the course layout will look up in §4.10.3 — open the new card after Add and confirm the breadcrumb shows the name you typed.

Dashboard

---

New CourseAddUpdate

New Description

---

Published Courses (0)

---

4.10.3 Course Navigation Toggle

Now that courses are declared in the Zustand store, the Courses layout can share them by retrieving the same array from useCoursesStore. The layout finds the course whose _id matches the cid path parameter, then renders that name in the heading and breadcrumb. In Chapter 3 the layout imported courses from the JSON database, so a course you created on Dashboard could not appear here. Refactor app/(kambaz)/courses/[cid]/layout.tsx to a Client Component, read cid with useParams, and look up the course in the store so a newly added course still has a name in the breadcrumb. Confirm you can navigate to new courses created on the Dashboard.

On the left of the course name there is a sandwich icon that should show and hide Course Navigation. Implement the toggling behavior so that when users click the icon, the sidebar hides, and if they click it again, the navigation shows again. That flag is local to the course layout, so useState is enough — leave it out of Zustand. To practice both the store lookup and the toggle, update the layout as shown below. Confirm a course you added on Dashboard opens with the name you typed, and confirm the hamburger hides and shows the sidebar.

CoursesLayoutapp/(kambaz)/courses/[cid]/layout.tsxCopy

"use client";

import { ReactNode, useState } from "react";
import { useParams } from "next/navigation";
import { FaAlignJustify } from "react-icons/fa6";
import "@/app/labs/lab2/tailwind/utilities.css";
import CourseNavigation from "./Navigation";
import Breadcrumb from "./Breadcrumb";
import { useCoursesStore } from "../../store/coursesStore";

export default function CoursesLayout({
  children,
}: Readonly<{
  children: ReactNode;
}>) {
  const { cid } = useParams();
  const courseId = typeof cid === "string" ? cid : "";
  const courses = useCoursesStore((state) => state.courses);
  const course = courses.find((c) => c._id === courseId);
  const [showCourseNav, setShowCourseNav] = useState(true);

  return (
    <div id="wd-courses">
      <h2 className="text-2xl font-semibold text-red-600">
        <FaAlignJustify
          className="me-4 mb-1 inline cursor-pointer text-xl"
          onClick={() => setShowCourseNav(!showCourseNav)}
          title="Toggle course navigation"
        />
        <Breadcrumb course={course} />
      </h2>
      <hr className="my-3" />
      <div className="flex gap-4">
        {showCourseNav ? (
          <div className="hidden w-[140px] shrink-0 md:block">
            <CourseNavigation cid={courseId} />
          </div>
        ) : null}
        <div className="min-w-0 flex-1">{children}</div>
      </div>
    </div>
  );
}

useParams can return a string or an array, so the layout normalizes cid before find. The hamburger calls setShowCourseNav(!showCourseNav) and the sidebar renders only when that flag is true. On medium viewports and wider the navigation is a narrow column; on small screens it stays hidden because the existing Tailwind hidden md:block classes already collapse it. Open /courses/RS101/home and click the hamburger (Figure 4.10.3). With the sidebar visible the screen looks like Figure 4.10.3a; after a click it looks like Figure 4.10.3b. Add a course on the dashboard, open it, and confirm the breadcrumb shows the name you typed.

"use client";

export default function ModuleEditor({
  show,
  handleClose,
  dialogTitle,
  moduleName,
  setModuleName,
  addModule,
}: {
  show: boolean;
  handleClose: () => void;
  dialogTitle: string;
  moduleName: string;
  setModuleName: (name: string) => void;
  addModule: () => void;
}) {
  if (!show) return null;
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
      id="wd-add-module-dialog"
    >
      <div className="w-full max-w-md rounded-lg bg-white shadow-lg">
        <div className="flex items-center justify-between border-b border-neutral-200 px-4 py-3">
          <h3 className="m-0 text-lg font-semibold">{dialogTitle}</h3>
          <button type="button" onClick={handleClose} aria-label="Close">
            ×
          </button>
        </div>
        <div className="px-4 py-3">
          <input
            className="w-full rounded border border-neutral-300 px-3 py-1.5"
            value={moduleName}
            onChange={(e) => setModuleName(e.target.value)}
            id="wd-add-module-name"
          />
        </div>
        <div className="flex justify-end gap-2 border-t border-neutral-200 px-4 py-3">
          <button type="button" onClick={handleClose} id="wd-add-module-cancel">
            Cancel
          </button>
          <button
            type="button"
            onClick={() => {
              addModule();
              handleClose();
            }}
            id="wd-add-module-submit"
          >
            Add Module
          </button>
        </div>
      </div>
    </div>
  );
}