Как правильно вывести результат?

Question

[Андрей Ефимов]

Приветствую знающих. Как вывести правильно результат на страницу? Подскажите как решить вопрос или подскажите что делаю не так.

<main class="content">
    {
        categories.map(category => {
            <div>{ category.name }</div>
            entries.map(entry => {
                if (category.id === entry.category_id) {
                    <div>{ entry.name }</div>
                }
            })
        })
    }
</main>

Результат
===============
--Категория 1
-- Запись 1
-- Запись 2
--Категория 2
-- Запись 3
-- Запись 4

Через console.log выводит, но как на страницу отобразить не могу понять.

<main class="content">
    {
        categories.map(category => {
            console.log(category.name);
            entries.map(entry => {
                if (category.id === entry.category_id) {
                    console.log(entry.name)
                }
            })
        })
    }
</main>

Comments

[Алексей Дубровин]

Cтрелочная функция это сокращение для обычной функции
Сделайте обычную функцию, и поместите ее в map
Так сразу будет наглядно и понятно что не так

В данном случае, у вас нет return, и она ничего не возвращает

Answer 1

[Михаил Р.]

categories.map
А из map что то выйдет (вернется) сегодня погулять?

<main class="content">
  {
    categories.map(category => (
      <div>
        {category.name}
        {entries.map(entry => {
          if (category.id === entry.category_id) {
            return <div>{entry.name}</div>;
          }
        })}
      </div>
    ))
  }
</main>

Answer 2

[Speakermen]

Это Relations в typeorm например, есть две таблицы category, subcategory с бэка думаю придет json один, а не 2 category, subcategory
У них есть связи One-to-one, Many-to-one / one-to-many, Many-to-many

const category = [
  {
    id: 1,
    name: "Фрукты",
  },
  {
    id: 2,
    name: "Овощи",
  },
  {
    id: 3,
    name: "Напитки",
  },
];

const subcategory = [
  { id: 1, name: "Апельсины", categoryId: 1 },
  { id: 2, name: "Бананы", categoryId: 1 },
  { id: 3, name: "Картошка", categoryId: 2 },
  { id: 4, name: "Кока-кола", categoryId: 2 },
];
//one-to-many
const state = [
  {
    id: 1,
    category: "Фрукты",
    subcategory: [
      { id: 1, name: "Апельсины" },
      { id: 2, name: "Бананы" },
    ],
  },
  {
    id: 2,
    category: "Овощи",
    subcategory: [{ id: 1, name: "Картошка" }],
  },
  {
    id: 3,
    category: "Напитки",
    subcategory: [{ id: 1, name: "Кока-кола" }],
  },
];