I am a beginner trying to learn NextJS and see your youtube (From: https://www.youtube.com/watch?v=_IBlyR5mRzA)

I created a products card component to render categories page

import React from 'react'; import { useRouter } from 'next/router'; import Navbar from '../../components/Navbar'; import Layout from '../../components/Layout'; import Footer from '../../components/Footer'; import Products from '../../components/Products'; import data from '../../utils/data'; export default function CatagoryScreen() { const { query } = useRouter(); const { slug } = query; const category = data.find((x) => x.slug === slug); if (!category) { return <div>Category not found</div>; } return ( <> <Navbar title={category.category} /> <Layout> <section className="bg-contain bg-right-bottom bg-no-repeat hero-wrap-categoriesList"> <div className="flex h-96 items-center"> <div className="container m-auto"> <div className="grid grid-cols-1 md:grid-cols-2"> <h2>{category.category}</h2> </div> </div> </div> </section> <section id="catalog" className="bg-white pt-10"> <div className="container m-auto"> <h3 className="my-5">Products</h3> <div className="grid grid-cols-4 text-left mb-10"> {data.map((products) => ( <Products key={products.id} productslist={products.products} /> ))} </div> </div> </section> </Layout> <Footer /> </> ); } /* eslint-disable @next/next/no-img-element */ import Link from 'next/link'; import React from 'react'; export default function Products({ productslist }) { return ( <> {productslist.map((products) => ( <div key={products.id} productslist={products} className="card"> <a> <img className="rounded-md drop-shadow-xl" alt="name" src="image" /> </a> <div className="flex flex-col items-center justify-center p-5"> <h2>{productslist.name}</h2> <p>description</p> <div className="grid grid-cols-2"> <button>Order</button> <a>description</a> </div> </div> </div> ))} </> ); }

and try using .map() function to data.js for display Product name but not display on browser (localhot:3000).

const data = [ { id: 1, category: 'Micro fertilizer', slug: 'Micro-fertilizer', image: '/img/Micro-fertilizer.png', description: 'Can be used as the main fertilizer for agricultural crops', products: [ { name: 'Ferti Seeds', slug: 'fertiseeds', Image: '/img/fertilizer-fertiseeds.jpg', price: 120, rating: 4.5, numReviews: 8, countInStock: 20, description: 'Cereal seeds, Technical seeds', }, } ]
Kittichai w. Asked question November 2, 2022