DEV Community

Jamie Barton
Jamie Barton

Posted on

Create CategoryList and Category components

Similar to our ProductList and Product components, let's now do the same for categories.

In a new file Category.js within the src/components directory, add the following:

export default function Category({ name }) {
  return name;
Enter fullscreen mode Exit fullscreen mode

This one is very basic! All we're doing in this example is rendering the name of our category.

Let's now create a component to list our categories, and render this component for each.

In a new file CategoryList.js inside src/components, add the following:

import React from "react";
import { Link } from "gatsby";

import Category from "./Category";

export default function CategoryList({ categories }) {
  if (!categories) return null;

  return (
      { => (
        <li key={category.slug}>
          <Link to={`/categories/${category.slug}`}>
            <Category {...category} />
Enter fullscreen mode Exit fullscreen mode

Just like we were linking to products before, here we're now linking to categories.

You'll notice to for our categories uses a slug instead of permalink.

Discussion (0)