Project 15: Contact Us Form

React Engineer

Builds on these lessons

Step 1 of 3

Project

Fetching Data in useEffect

Fetch a list of office locations inside useEffect on mount, storing the result in state. This is the classic pattern for loading data a component needs as soon as it appears — fetch, then setState once the response arrives.

🎯 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 { useState, useEffect } from "react";

export default function ContactForm() {
  const [offices, setOffices] = useState([]);

  useEffect(() => {
    fetch("/api/offices")
      .then((res) => res.json())
      .then((data) => setOffices(data));
  }, []);

  return (
    <div>
      <h1>Contact Us</h1>
      <p>{offices.length} offices worldwide</p>
    </div>
  );
}

← Previous Next →