Full-Stack - lesson 4 | HackIndia Skills

Full-Stack - lesson 4 | HackIndia Skills | HackIndia

Example

React fetch example

This example calls your own API route and renders all three states. Use the same pattern for dashboards, lists, profile pages, or search results.

import { useEffect, useState } from "react";

export default function ProjectList() {
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  async function loadProjects() {
    setLoading(true);
    setError("");

    try {
      const res = await fetch("/api/projects");

      if (!res.ok) {
        throw new Error("Could not load projects");
      }

      const data = await res.json();

      if (!Array.isArray(data.projects)) {
        throw new Error("Projects data is not in the expected format");
      }

      setProjects(data.projects);
    } catch (err) {
      setError(err.message || "Something went wrong");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    loadProjects();
  }, []);

  if (loading) {
    return <p>Loading projects...</p>;
  }

  if (error) {
    return (
      <div>
        <p>{error}</p>
        <button onClick={loadProjects}>Try again</button>
      </div>
    );
  }

  return (
    <ul>
      {projects.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  );
}

Show loading and failure

One thing to remember

Why this matters

Handle three states

React fetch example

Use AI carefully

Common weak spots

Test failure on purpose

Do this now

Quick check