Разделение одной строки на несколько строк с использованием таблицы Vanilla с reactjs

Question

У меня проблемы с фрагментацией строк таблицы из JSON выбранных данных.

Код выглядит следующим образом:

                        <table>
                            <thead>
                            <tr>
                                <th scope="col">Location ID #</th>
                                <th scope="col">Device Name</th>
                            </tr>
                            </thead>
                            <tbody>
                            {Object.keys(deviceList).map((key, index) => {
                                return (
                                    <tr key={index}>
                                        {deviceList[key].ports.map(port => port.value.id)
                                            .map(ids => {
                                                console.log("type", typeof(ids)) // it says number
                                                return <td>{ids}</td>
                                                })
                                            }
                                    </tr>
                                )
                            })}
                            </tbody>
                        </table>

actual result:
ID.     Name. 
23301   24401
99501   87701
22201

Вышеуказанный результат состоит в том, что один порт может иметь несколько идентификаторов, но он показывает это параллельно вместо следующей строки. Таким образом, есть три порта, и порт A имеет два устройства, порт B имеет два устройства, а порт C имеет только один.

expected result:
ID.     Name. 
23301   
24401   
99501
87701
22201

Answer 1

Я мог бы исправить это, изменив способ реализации.

 {Object.keys(deviceList).map(key => {
                                return deviceList[key].ports.map(port => {
                                    return (
                                        <tr>
                                            <td> {port.value.siteId}</td>
                                            <td>{port.value.name}</td>
                                            <td>{deviceList[key].value.targetId === undefined ? deviceList[key].value.name : deviceList[key].value.targetId}</td>
                                            <td>{deviceList[key].value._type}</td>
                                            <td>{port.description === undefined ? deviceLookup[key].value.name : deviceList[key].value.name + ' ' + "[" + port.description + "]"}</td> 
</tr>
                                        )
                                    })
                                })
                            }