Gatsby: render tags in blog post

[sethwilsonUS]

Hello!

Thanks for the excellent documentation on adding tags to a blog here:
https://www.gatsbyjs.org/docs/adding-tags-and-categories-to-blog-posts/

I'm brand new to React, and so I'm stumped as to how to get the last optional step of rendering the tags within a blog post.

Within my src/templates/blog-posts.js file I have the following line:

<p>{post.frontmatter.tags}</p>

Which works, but of course it just smushes all the tags together.

I'd love a little guidance on how to style these simply with a space between them or something. I know how to do this with css/vanilla js, but don't know the React/JSX way.

As a bonus, I'd love each tag to be linked to its corresponding tag page.

Thanks so much for any help, and forgive the newbie question. :)

[shoesandsocks]

I'm pretty much a newbie myself, and used that same page. It sounds like you've followed it far enough to get the gatsby.node file to create pages for tag/foo, tag/bar, etc?

There's a couple ways to render an array in React; here's something I've done. Instead of rendering post.frontmatter.tags in a <p> element, use .map() to sort of "unroll" the array like this (I'm omitting most all the other JSX and React 'stuff', leaving just enough for context hopefully):

import Link from 'gatsby-link';

...

<p>
    This was posted on <span>{post.frontmatter.date}<span>.
</p>
{post.frontmatter.tags.map((tag, index) => {
    return (
        <span key={index} className="tag">
            <Link to={`/tags/${tag}`}>{tag}</Link>
        </span>
      )
    }
}

with some vanilla styling, maybe...

.tag {
  margin-right: 24px;
  padding: 4px;
  border: 1px solid rebeccapurple;
}
a {
  color: rebeccapurple;
}

(I think you can style the Link that way? I'm using styled-components so my 'real' code is different, but I think that'd work? Or I guess to be more specific you could aim the css at .tag > a?)

Let me know what you think - like I said, I'm still pretty new to this stuff, too, but hopefully it helps a bit.

[shoesandsocks]

(update: Using the array index as a unique React element's key is a bad practice because things will foul up rapidly if you're adding and removing elements interactively. In this case I can't imagine that would happen... it might be academically-preferred to use the tag itself as the unique key. Assuming your tags aren't duplicates... Hm... )

[sethwilsonUS]

@shoesandsocks thanks! That mostly seemed to do the trick, though it took a little wiggling. Here's what I ended up with:

<p><strong>Tags:{'  '}{post.frontmatter.tags.map((tag, index) => {
  return (
    <span 
       style = {{
         margin: '0px 12px 0px 0px',
         padding: '4px',
         border: '1px solid rebeccapurple'
       }}
       key={index} className="tag">
         <Link 
           to={`/tags/${tag}`}
           style = {{
             color: 'rebeccapurple',
             textDecoration: 'none'
           }}
           >{tag}</Link>{' '}        
    </span>
  )
})}

Now the only problem I'm having is that, no matter how I try to change it, the textDecoration: 'none' doesn't seem to want to take effect--the underline disappears on hover, but I want it gone entirely.

But that's minor. Mostly in business now! I'll only get better as I learn more about React.

[sethwilsonUS]

__Update__: So I tried changing the textDecoration: 'none' to textDecoration: 'overline', and lo and behold the link then showed up with BOTH an underline and an overline. So the textDecoration parameter does seem to have an effect, but it's being overrides by something, possibly a? I tried changing the Link to an a but I got other ill effects and I still don't think it worked. Curioser and curiouser.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!