Project 7: Restaurant Menu

React Engineer

Builds on these lessons

Step 1 of 2

Project

useReducer for Structured State Updates

Replace a set of related useState calls with one useReducer(menuReducer, initialState), where menuReducer is a function handling actions like { type: "FILTER_CATEGORY" }. Once several pieces of state update together in related ways, a reducer keeps every transition in one readable, testable place instead of scattered setter calls.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useReducer } from "react";

function menuReducer(state, action) {
  switch (action.type) {
    case "FILTER_CATEGORY":
      return { ...state, category: action.category };
    default:
      return state;
  }
}

export default function RestaurantMenu() {
  const [state, dispatch] = useReducer(menuReducer, { category: "all" });

  return (
    <div>
      <p>Showing: {state.category}</p>
      <button onClick={() => dispatch({ type: "FILTER_CATEGORY", category: "mains" })}>
        Mains
      </button>
    </div>
  );
}

← Previous Next →