反应，排序和对象数组（缩小和映射？）

Question

问题如下：（https://codesandbox.io/s/8p21n6p09l）

我有一个对象数组（称为模块），看起来像这样：

const modules = [
  {
    thematicArea: "Topic 1",
    id: 1,
    name: "Budowanie postawy asertywnej",
    details: [
      "Czym jest asertywność?",
      "Asertywny Asertywny menedżer – charakterystyczne zachowania"
    ]
  },
  {
    thematicArea: "Topic 2",
    id: 2,
    name: "Asertywne narzędzia",
    details: [
      "Asertywna odmowa – zastosowanie trzyetapowej procedury",
      "Technika „Zdartej płyty”",
      "Wyrażanie pochwał i próśb"        ]
  },
  {
    thematicArea: "Topic 3",
    id: 3,
    name: "Lorem ipsum 1",
    details: ["Coś się wymyśli", "Żeby nie było tak łyso"]
  },
  {
    thematicArea: "Topic 3",
    id: 4,
    name: "Lorem ipsum 2",
    details: [
      "Wyczesane szkolenia",
      "Naprawdępowinieneś wrzucić to do koszyka",
      "Na co czekasz - dodaj!"
    ]
  },
  {
    thematicArea: "Topic 3",
    id: 5,
    name: "Ipsum Lorem",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 6,
    name: "Ipsum Lorem 1",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 7,
    name: "Ipsum Lorem 2",
    details: ["Och", "Ach"]
  },

并且此数组从App.js传递到thmaticArea.jsx组件。问题是我在显示数据时改变了主意，并希望通过thematicArea对它们进行分组，所以它看起来像：

Topic 1: 
 - Name 1
 - Name 2
 - Name 6
 - ...
Topic 2:
 - Name 3
 - Name 5
Topic 3:
- Name 4
and so on.

每个Name都是唯一的，只能有一个thematicArea（Topic），但是一个thematicArea（Topic）可以有多个名称（Name 1，Name 2 ...）。

我相信我应该首先使用reduce（）方法然后使用.map（），但我已经尝试过多种方式，但它对我不起作用。 Reduce（）方法正在创建一个没有长度的数组......这就是我尝试用App.js中的reduce实现它并将其作为'modules'传递给thematicArea.jsx组件的方法：

modules={this.state.modules.reduce(function(groups, item) {
              const val = item["thematicArea"];
              groups[val] = groups[val] || [];
              groups[val].push(item);
              return groups;
            }, [])}

达到预期结果的最佳方法是什么？