Получение значения свойства объекта внутри массива внутри другого массива

Question

Я разрабатываю блог, используя Strapi и React, и статьи в блоге имеют несколько категорий, я получаю запрос GraphQL от Strapi, как это

(blogpostObject){
  
  "categories": [
    {
      "name": "Category 1"
    },
    {
      "name": "Category 2"
    },
  ],
  
}

Я хочу получить доступ к значению «name» каждой категории и отображать их через запятую, каждая из них с тегом <a> со ссылкой на другую страницу.

пока что я только придумал это решение

queryData.map(article => (
article.categories.map(category => category.name).toString().replace(/,/g, `, `) 

this отобразит: «Категория 1, Категория 2», но я не знаю, как добавить тег <a> к каждому из них отсюда.

РЕДАКТИРОВАТЬ: Я использую Gatsby для создания этого проекта, поэтому я использую компонент React Link для обработки внутренних ссылок.

Это образец ответа GraphQL

{
  "data": {
    "allStrapiArticle": {
      "nodes": [
        {
          "title": "This is my second article",
          "slug": "this-is-my-second-article",
          "content": " Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          "id": "Article_2",
          "author": {
            "name": "Average Joe"
          },
          "categories": [
            {
              "name": "Category 1"
            }
          ],
          "created_at": "Wednesday, June 24th 2020"
        }

Answer 1

import React from "react";

// this data would come from graphql instead
const data = {
  allStrapiArticle: {
    nodes: [
      {
        title: "This is my second article",
        slug: "this-is-my-second-article",
        content: " Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        id: "Article_2",
        author: {
          name: "Average Joe"
        },
        categories: [
          {
            name: "Category 1"
          },
          {
            name: "Category 2"
          },
          {
            name: "Category 3"
          }
        ],
        created_at: "Wednesday, June 24th 2020"
      }
    ]
  }
};

const App = () => {
  return (
    <div>
      {data.allStrapiArticle.nodes.map(node => {
        return node.categories.map((category, index) => {
          return (
            <>
              <a href="/">{category.name}</a>
              {index < node.categories.length - 1 && ", "}
            </>
          );
        });
      })}
    </div>
  );
};

export default App;

Редактировать adoring-forest-3yfnj

Answer 2

queryData.map(article => (
article.categories.map(category => "<a href='#'>" + category.name + "</a>").toString().replace(/,/g, `, `

Answer 3

Вы пробовали

article.categories.map(category => <a href='#'>{category.name}</a>)