Как отрисовывать вложенные элементы в React

Question

Я пытаюсь отобразить разные таблицы db как html таблицы в реакции. Проблема здесь в том, что количество столбцов в каждой таблице разное. В моем компоненте я получаю данные заголовка вместе с данными полной таблицы в формате JSON.

, например,

For table #1:
header data : ["A","B","c"]
table data : [{"A":1,"B":2,"c":3},{"A":4,"B":5,"c":6}]


For table #2:
header data : ["A","B"]
table data : [{"A":1,"B":2},{"A":4,"B":5}]

Теперь, что-то, если в java я мог бы написать что-то вроде :

for(Object i:tableData)
{
   for(Object j:headerData)
   {
      print(i[j])
   }

}

Чтобы в идеале создать что-то вроде этого:

for table #1:
1 2 3
4 5 6

for table #2:
1 2
3 4

Но я не уверен, как это сделать в React.

До сих пор я кодировал что-то вроде этого:

<table>
<thead><tr>{this.state.header.map(item=>{<th>{item}</th>})}</tr></thead>
<tbody>....</tbody>
</table>

Здесь я могу получить требуемый заголовок, например:

for table #1:
A B C

for table #2:
A B

Но я не уверен, как печатать элементы тела. пожалуйста, дайте подходящее предложение, подсказку или ссылку, которые могут мне помочь.

Спасибо

Answer 1

Вам нужно перебрать объект в каждом элементе массива. Используйте Object.values ​​ Также проверьте Object.keys и Object.entries для повторения объекта.

Что-то вроде этого должно работать

<tbody>
{this.state.body.map((item)=> {
   return <tr> 
            { 
              Object.values(item).map(col => <td>{col}</td>)  
            } 
          </tr>
});}
</tbody>