Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – The title property appears to me as a type that does not exist and I don't know what to do?

I am doing a dynamic route with astro and react and when doing a fetch to obtain the array of objects it tells me that the Prduct.title property is never and I don’t know why

src/pages/category/[category].astro

---
import type { Product } from "../../types/component.type";
import Layout from "../../layouts/Layout.astro";

export async function getStaticPaths(category: Product) {

    const categoryToSearch = category.id
  const data = await fetch(https://api.escuelajs.co/api/v1/categories/${categoryToSearch}/products).then(response => response.json());

  return data.map((category: Product) => {
    return {
      params: { id: category.id },
      props: { products: data },
    };
  });
}

const { id } = Astro.params;
const { products } = Astro.props;

---

<Layout title={id}>
    <Layout title={id}>
    <section class="py-36">
      {products.map((product: Product) => (
            <h1>{product.title}</h1>
      ))}
    </section>
</Layout>
</Layout>

I get this error:

14:18:16 [WARN] [router] getStaticPaths() ignored in dynamic page /src/pages/category/[category].astro. Add export const prerender = true; to prerender the page as static HTML during the build process.
14:18:17 [200] /category/1 16ms
14:18:17 [ERROR] Cannot read properties of undefined (reading 'map')
  Stack trace:
    at Object.default (C:Usersfacummodern-ecommercesrcpagescategory[category].astro:27:17)
    [...] See full stack trace in the browser, or rerun with --verbose.

I would have to return an array of objects to later be able to put together the dynamic route of a product for an e-commerce that I am doing

Tags:

2

Answers


  1. 0

    You are missing quotes around the string in your fetch. It should be:

    const data = await fetch("https://api.escuelajs.co/api/v1/categories/${categoryToSearch}/products")
  .then(response => response.json());
    Login or Signup to reply.
  2. 0

    Your getStaticPath function is never called (see the WARN is your console) so your component never receives those props and you can’t use map with an undefined variable.

    The reason why your getStaticPath is never called is because params mismatches your filename ([category].astro). It should be:

    export async function getStaticPaths(category: Product) {

  const categoryToSearch = category.id
  const data = await fetch(`https://api.escuelajs.co/api/v1/categories/${categoryToSearch}/products`).then(response => response.json());

  return data.map((category: Product) => {
    return {
      params: { category: category.id },
      props: { products: data },
    };
  });
}

    I replaced params: { id: category.id } with params: { category: category.id }. If you look at Astro documentation you will see that the key used inside params should match your filename (the name inside the brackets).

    With those corrections, Astro should execute getStaticPaths since the params is valid and you should now receive your props.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search