Как применить стиль к массиву из файла разметки для веб-сайта, созданного Гэтсби?

Я использую несколько шаблонов для создания веб-страниц с использованием Gatsby JS, при этом вся информация для каждого шаблона сохраняется в файле уценки (стили CSS выполняются через Bulma).

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

Каждая страница будет иметь переменное количество тегов. Мой вопрос: как мне выполнить цикл / итерацию для стилизации каждого тега в файле javascript? Я видел, что включение скриптов в html считается плохим тоном (не то чтобы мой скрипт в настоящее время работает). Также, похоже, есть противоречивая информация о том, подходит ли использование map или forEach.

Это мой образец компонента (с отображением, которое не работает ...):

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>
    )
  }
}

Отображаемая веб-страница должна иметь следующий HTML-код для раздела, содержащего «Особенности»:

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