My Problem
----------

I have mockdata Object that looks like that:

```
topicGroups: {
    0: {
      title: "Languages",
      topics: {
        0: {
          title: "Javascript",
          description: "Everything about Vanilla JS",
          latestTopic:
            "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
        },
        1: {
          title: "C#",
          description: "Microsoft's go to language",
          latestTopic: "Main geiles Topic alter"
        }
      }
    },
    1: {
      title: "Coding Partner Search",
      topics: {
        0: {
          title: "Suche nach Liebe",
          description: "Everything about Vanilla JS",
          latestTopic:
            "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
        }
      }
    }
  }

```

I want to achieve the following:

* Map over all the topics groups (to get access to the `title` string and `topics` object.
* Map over the `topics` object inside the first map (so I'm in scope for the group title)
* Return Jsx where I use just the group's title and current topic `title` and `description`

I tried it with several lodash functions, but I can't make it work. The closest I got was to create another fresh object besides `topicGroups`, but then it is difficult to figure out which topics refers to which topicGroups. 

**Example how I want to use the jsx and what I want to return:**

```
return groups.map(group =>
      group.topics.map(topic => {
        return (
          <ForumTopicGroup title={group.title}>
            <ForumTopic>{topic.title}</ForumTopic>
          </ForumTopicGroup>
        );
      })
    );

```

What is the best and most clean way to achieve this?

**The reason why I have my data like only with object instead of using arrays is, because I want to work with this data like it comes from firebase (as I will use firebase later on in the application**