Цикл по объекту в JSX

Question

В файле JSX мне нужно пройти через два уровня объекта, чтобы отобразить информацию, которую хранит каждый внутренний массив.Это выглядит примерно так: Object > Object > Array

Мои данные структурированы следующим образом:

const data = {
  group1: {
    subgroup1: [{...}, {...},{...}],
    ...
  },
  ...
}

Так что я пытаюсь сделать что-то вроде этого:

return (
  <ul>
    for (group in data) {
      <li>Group Name
        <ul>
          for(subgroup in group) {
            <li>Subgroup Name
              <ul>
                subgroup.map()
              </ul>
            </li>
          }
        </ul>
      </li>
    }
  </ul>
)

Я знаю, что циклы недопустимы внутри файла JSX, но преобразование моего объекта в несколько массивов также кажется неправильным, поскольку я не знаю, сколько элементов может появиться из моего API.

Answer 1

Я решил это, используя предложение Herohtar, извлекая ключ / значение каждого из родительских Объектов в формате Array:

{
  Object.entries(data).map(group => (
      <ul key={group[0]}>
        <li>{group[0]}
          <ul>
            {
              Object.entries(group[1]).map(subgroup => (
                  <ul key={subgroup[0]}>
                    <li>{subgroup[0]}
                      <ul>
                        {
                          subgroup[1].map(item => (
                              <li key={item.code}>{item.name}</li>
                            )
                          )
                        }
                      </ul>
                    </li>
                  </ul>
                )
              )
            }
          </ul>
        </li>
      </ul>
    )
  )
}

Хотелось бы, чтобы был более элегантный способ сделать это.