Есть json объект следующего вида: [ {data: "string", anotherData: {however:'lol'}},

...
]```Мне нужно отрендерить таблицу, делаю следующее:
slice - чтобы выбрать объекты от n до m значения (используется для "пагинации")
Затем рендерится таблица:
```json2table = json => {
const cols = Object.keys(json[0]);
const headerRow = cols.map(col => <th key={col}>{col}</th>);
const bodyRows = json.map(row => (
<tr key={row}>
{cols.map(col => <td key={row[col]}> {row[col]} </td>)}
</tr>
));

return (
<table>
<thead>
<tr>{headerRow}</tr>
</thead>

<tbody>{bodyRows}</tbody>

<tfoot>
<tr>{headerRow}</tr>
</tfoot>
</table>
);
};Проблема:
1) Во время пагинации (значения от и до в slice меняется и массив режется соответственно этим значениям) окуда-то появляются новые cols, я не пойму, откуда
2) Объект в объекте может содержать не только текст, но и массив, как лучше всего это отображать?
[
{date: "string", anotherData: ['string', ...], oneMore:[{omg:'really?'}]}
]
Буду рад любой помощи, правки приносят быстрее, чем я успеваю обрабатывать все :(

UPD:
Возможно-ли, что новые колонки появляются из за slice? Мне кажется именно здесь кроется корень проблемы, чем лучше всего заменить?

UPD:
Не понимаю, рендерится 30 VNode элементов (tr), в которых 19 childrens (cols/td), но в таблице откуда-то появляются в некоторых строках (tr) лишние столбцы (td)
Ну вот и какого..

UPD:
Проблема решена
Решение:
НИКОГДА не забывать смотреть, что передается в key внутри map, потому-что null - вообще не годится как ключ
Всем спасибо за внимание и помощь!
(Знаю, у вас еще очень рано, спите сладко ❤ )

Код кидать нет смысла. Кидай скрины