Hi, please i need help for resolving this error

[Kapelo256]

⨯ src\app_components\Categories\index.tsx (18:28) @ map
⨯ TypeError: Cannot read properties of null (reading 'map')
at Categories (./src/app/_components/Categories/index.tsx:49:38)
at stringify ()
16 |
17 |

18 | {categories.map((category) => (
| ^
19 |
20 | ))}
21 |

[dikshyant3]

Provide the code snipped for it .from above error either the type for the categories is null or data is not loaded in your file.

[Kapelo256]

import React from 'react' import Link from 'next/link' import { Category } from '../../../payload/payload-types' import CategoryCard from './CategoryCard' import classes from './index.module.scss' const Categories = ({ categories }: { categories: Category[] }) => { return ( <section className={classes.container}> <div className={classes.titleWrapper}> <h3>Shop by Categories</h3> <Link href="/products">Show All</Link> </div> <div className={classes.list}> {categories.map((category) => ( <CategoryCard key={category.id} category={category} /> ))} </div> </section> ) } export default Categories Le jeu. 7 déc. 2023 à 21:44, Dikshyant Dhungana ***@***.***> a écrit :

…

Provide the code snipped for it .from above error either the type for the categories is null or data is not loaded in your file. — Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZHGOXPASIL2UNAXMRLDAELYIKEJVAVCNFSM6AAAAABALY7W2CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNBWGUYDIOJXHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[dikshyant3]

The error is because the categories prop is null. Make sure the categories prop is not null and check whether the error remains or not by adding below snippet during the map array function
{categories?.map((category) => (

))}

[Kapelo256]

Hello Adrianhajdin/Ecommerce, i have replaced it with this: {categories?.map((category) => ( ))}, but i do not know how to make categories prop non-null. Le ven. 8 déc. 2023 à 08:20, Dikshyant Dhungana ***@***.***> a écrit :

…

The error is because the categories prop is null. Make sure the categories prop is not null and check whether the error remains or not by adding below snippet during the map array function {categories?.map((category) => ( ))} — Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZHGOXOW3DGF36Z6TD7WDG3YIMO27AVCNFSM6AAAAABALY7W2CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNBXGI2TKNRXGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[dikshyant3]

The categories props comes from payload-types.ts make sure everything is correct there. The usage of optional chaining might resolve the issue which is {categories?.map((category) => ())}, if it doesn't then there might be another codebase which causes the error.

[Alain369]

I have the same problem. I tried two times two repeat the whole chapter but lways : ⨯ src/app/_components/Categories/index.tsx (17:21) @ map
⨯ TypeError: Cannot read properties of null (reading 'map')
at Categories (./src/app/_components/Categories/index.tsx:49:38)
at stringify ()
digest: "2181736854"
15 |

16 |

17 | {categories.map((category) => (
| ^
18 |
19 | ))}
20 |

At least the page will show when I add the ? like you said but this still wont give me any categories on my page

[Alain369]

So I found my mistake. I was missing the fourth closing curley bracket in the categories .ts in line 24. After adding it I got another error because of missing images in some category cards I created so I also added the question mark to line 22 from the categoryCard index.tsx to make the image optional: style={{ backgroundImage: url(${media?.url}) }}. Of course you don't necessarily want this when the product is running but it helps building before you got all your images together.

[Loyoenock]

I was facing the same challenge and followed the steps as provide above, now I have no error but the categories and images are not showing. Someone help me

[AngieProg]

I had the same problem. I was missing the last "t" letter in height world in the categories.ts
I recommende chechking the modified files in the category section:
src\payload\collections\Categories.ts
src\payload\payload-types.ts
src\app_graphql\products.ts
src\app_graphql\categories.ts
src\app_graphql\blocks.ts
src\app(pages)[slug]
src\app_api\fetchDocs
src\app_components\Categories

[Loyoenock]

Managed to sort it out, I had used lowercase c instead of uppercase. Thank you

…

On Sat, Dec 16, 2023 at 1:30 AM AngieEspinoza ***@***.***> wrote: I had the same problem. I was missing the last "t" letter in height world in the categories.ts I recommende chechking the modified files in the category section: src\payload\collections\Categories.ts src\payload\payload-types.ts src\app_graphql\products.ts src\app_graphql\categories.ts src\app_graphql\blocks.ts src\app(pages)[slug] src\app_api\fetchDocs src\app_components\Categories — Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMPS7V33GFBR5Y66PZVK2V3YJTFQXAVCNFSM6AAAAABALY7W2CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJYGU3DOMJXGU> . You are receiving this because you commented.Message ID: ***@***.***>

[Fernando-Ligabue]

Hello everyone, I also had a problem with this section, and after a few attempts, I discovered what was wrong with me.

In the (pages)[slug]page.tsx file, I needed to add the search for categories in the try/catch block.

In my specific case, after entering this data everything worked as expected.

   try {
     page = await fetchDoc<Page>({
       collection: 'pages',
       slug,
       draft: isDraftMode,
     })

     categories = await fetchDocs<Category>('categories')
   } catch (error) {
     console.error(error)
   }

I hope it helps anyone who is going through the same difficulty.

Best regards.

Thanks Adrian for another excellent tutorial.

Let's Code!!