albertofortes

This is a basic tutorial belongs to #100DaysOfGatsby Challenge.

Problem:

We have a Markdown basic blog system under GatsbyJS. We want to do a basic tag list for each post. So in the Frontmatter we could add a new field with an array of tags:

1---
2title: "How to make a list of tags in a Gatsby JS blog"
3subtitle: "Basic how to code a simple comma separated tag list in a blog post done with Gatsby JS (React)."
4date: "2020-01-04"
5banner: "/blog/100-days-of-gatsby-challenge.png"
6tags: ['javascript', '#100DaysOfGatsby', 'gatsby']
7---

Note: You need previously understand how to do a Markdown post page with [Gatsby's transformer plugin*(https://www.gatsbyjs.org/tutorial/part-six/).

Solution: Arrow function + map() method:

We need to have previously a Gatsby template to show each markdown post page. Again visit Basic Gatsby Blog tutorial:

1import React from "react"
2import { graphql } from "gatsby"
3import Layout from "../components/layout"
4
5export default ({ data }) => {
6  const post = data.markdownRemark
7  return (
8    <Layout>
9      <div className="container__inner">
10        <article className="article">
11          <h2 className="article__title">{post.frontmatter.title}</h2>
12          <h3 className="article__subtitle">{post.frontmatter.subtitle}</h3>
13          <p className="article__date">{post.frontmatter.date}</p>
14          <p className="article__tags">Tags: TO DO</p>
15          <div className="article__image"><img src={post.frontmatter.banner} alt="" /></div>
16          <div className="article__cont" dangerouslySetInnerHTML={{ __html: post.html }} />
17        </article>
18      </div>
19    </Layout>
20  )
21}
22
23export const query = graphql`
24  query($slug: String!) {
25    markdownRemark(fields: { slug: { eq: $slug } }) {
26      html
27      frontmatter {
28        title
29        subtitle
30        date(formatString: "DD MMMM, YYYY")
31        banner
32        tags
33      }
34    }
35  }
36`

So as frontmatter tag field is an array, we can use the power of map() function with an arrow function to display a list of tags, comma separated but avoiding last comma:

1{post.frontmatter.tags.map((tag, i) => [
2  <strong key={i}>
3    {tag}
4    {i < post.frontmatter.tags.length - 1 ? ', ' : ''}
5  </strong>
6])}

Final code (used in this page under src/templates/blog-post.js) would be:

1import React from "react"
2import { graphql } from "gatsby"
3import Layout from "../components/layout"
4
5export default ({ data }) => {
6  const post = data.markdownRemark
7  return (
8    <Layout>s
9      <article className="article">
10        <h2 className="article__title">{post.frontmatter.title}</h2>
11        <h3 className="article__subtitle">{post.frontmatter.subtitle}</h3>
12        <p className="article__date">{post.frontmatter.date}</p>
13        <p className="article__tags">Tags: {post.frontmatter.tags.map((tag, i) => [
14            <strong key={i}>
15              {tag}
16              {i < post.frontmatter.tags.length - 1 ? ', ' : ''}
17            </strong>
18          ])}
19        </p>
20        <div className="article__image"><img src={post.frontmatter.banner} alt="" /></div>
21        <div className="article__cont" dangerouslySetInnerHTML={{ __html: post.html }} />
22      </article>
23    </Layout>
24  )
25}
26
27export const query = graphql`
28  query($slug: String!) {
29    markdownRemark(fields: { slug: { eq: $slug } }) {
30      html
31      frontmatter {
32        title
33        subtitle
34        date(formatString: "DD MMMM, YYYY")
35        banner
36        tags
37      }
38    }
39  }
40`

That's all, pretty basic, but a nice to have snippet. To go beyond, visit the official Gatsby Documentation How to do a tag list page.