How do you apply styling to array from a markdown file for Gatsby built website?

Question

I'm utilizing several templates for creating webpages using Gatsby JS, with all the info for each template saved in a markdown file (CSS styling is done via Bulma).

----
path: /software/TestSoftware
title: TestSoftware
templateKey: mdSoftware
tags: ["analysis", "testing", "concrete"]
layoutType: page
---

Each page will have a variable number of tags. My question is how do I loop/iterate to style each tag within the javascript file? I have seen that it is considered bad form to include scripts within html (not that my script is currently working). There also seem to be conflicting information about whether using map or forEach is appropriate.

This is my sample component (with mapping that doesn't work...):

class mdSoftwareInsetPage extends React.Component {
  render() {
    const {html, frontmatter} = this.props.data.markdownRemark;
    var softwareTags = frontmatter.tags;
    return (
        <section className="section hero">
          <div className="hero-body">
            <div className="container has-text-centered">
              <h1 className="title">
                {frontmatter.title}
              </h1>
            </div>
          </div>
        </section>
        <section className="section">
        <div className="container content">
          <h3 className="specialties">
           Specialties
          </h3>
          <div className="tags">
          <script> 
          softwareTags.map((item, i) =>
            <span className="tag is-primary is-medium">
            ${item}
            </span>)
          </script>
          </div>
        </div>
        </section>
    )
  }
}

The rendered webpage should have the following HTML for the section containing the "Specialties":

<div className="container content">
  <h3 className="specialties">
   Specialties
  </h3>
  <div className="tags">
   <span className="tag is-primary is-medium"> analysis </span>
   <span className="tag is-primary is-medium"> testing </span>
   <span className="tag is-primary is-medium"> concrete </span>
  </div>
</div>

Answer 1

This should work:

<div className="tags">
  {softwareTags.map(tag =>
    <span className="tag is-primary is-medium" key={tag}>{tag}</span>
  )}
</div>

Map is preferred since it returns an array (without you building one manually) and arrays are a valid child type in React.