Как отрисовать таблицу округов и районов в React

Условие

API возвращает массив {id, name, districts: [{id, name}]}. В каждой строке таблицы первый столбец — округ, следующие — его районы. У округов разное число районов. Как типизировать и отрисовать?

Ответ

Опишите District и Okrug, проверьте данные на границе API и дополните короткие строки пустыми ячейками до общего числа колонок. Используйте устойчивые ID как ключи.

Типы: type District = { id: string; name: string }; type Okrug = { id: string; name: string; districts: District[] }. Максимум районов вычислите через reduce с начальным 0. Для округа выводите его название, районы и недостающие пустые td. Покажите состояния загрузки, ошибки и пустого ответа; TypeScript сам по себе не валидирует полученный JSON.