Next.js Discord

Discord Forum

Seeking help: Resolving "TypeError: projects.map is not a function" Issue with fetching from api

Answered
Collared Plover posted this in #help-forum
Open in Discord
Collared PloverOP
I'm currently facing an issue in my React application and could really use some help from the community. The problem revolves around the error "TypeError: projects.map is not a function", which I encounter when attempting to map through data fetched from an API.

Here's a brief summary of the issue:

* I'm fetching data from an API in my React application.
* The fetched data is stored in a state variable named projects.
* When I attempt to map through the projects data to display it in my component, I encounter the mentioned error.
* Strangely, the error occurs only when I'm trying to map through the fetched data. When logging the fetched data to the console, it appears to be in the expected format.

I've double-checked the implementation of fetching the data, and it seems to be working fine. However, I'm unable to figure out why I'm unable to map through the data without encountering this error.

If anyone has experienced a similar issue before or has any insights into what might be causing this problem, I would greatly appreciate your help. Any suggestions, tips, or guidance would be invaluable in resolving this issue.

Thank you in advance for your time and assistance.
Answered by Collared Plover
And here's my api
import { filteredProjects } from "@/app/lib/data";
import { NextResponse } from "next/server";
import { type NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  try {
    // if (!result) {
    //   throw new Error("No projects found for the given category");
    // }
    const searchParams = request.nextUrl.searchParams;
    const query = searchParams.get("categories");

    const { result }: any = await filteredProjects({ categories: query });

    return NextResponse.json({ result }, { status: 200 });
  } catch (error) {
    console.error("Error fetching projects:", error);

    return NextResponse.json(
      { message: "Error fetching projects" },
      { status: 500 }
    );
  }
}
;
View full answer

2 Replies

Collared PloverOP
export function FilteredProjects({ availableCategories, data }: FilterProps) {
  const [projects, setProjects] = useState<Project[]>(data);
  const [activeCategory, setActiveCategory] = useState<string>("All");

  async function fetchData(category: string): Promise<void> {
    try {
      const response = await fetch(
        `/api/projects/category?categories=${category}`
      );
      if (!response.ok) {
        throw new Error("Failed to fetch data");
      }
      const projectsData = await response.json();
      console.log(projectsData);
      setProjects(projectsData); // Update projects state with fetched data
    } catch (error) {
      console.error("Error fetching data:", error);
      setProjects([]);
    }
  }

  async function handleCategoryChange(category: string): Promise<void> {
    setActiveCategory(category);
    if (category === "All") {
      setProjects(data);
    } else {
      await fetchData(category);
    }
  }
Collared PloverOP
And here's my api
import { filteredProjects } from "@/app/lib/data";
import { NextResponse } from "next/server";
import { type NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  try {
    // if (!result) {
    //   throw new Error("No projects found for the given category");
    // }
    const searchParams = request.nextUrl.searchParams;
    const query = searchParams.get("categories");

    const { result }: any = await filteredProjects({ categories: query });

    return NextResponse.json({ result }, { status: 200 });
  } catch (error) {
    console.error("Error fetching projects:", error);

    return NextResponse.json(
      { message: "Error fetching projects" },
      { status: 500 }
    );
  }
}
;
Answer