Hi,
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