Splitting single row into multiple rows using vanilla Table with reactjs - reactjs

Question

I am having trouble in fragmenting table rows from the JSON fetched data.
Code looks like below:
<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
The above result is because one port can have multiple ID's but it shows that in parallel instead in the next row. So there are three ports and portA has two devices, portB has two devices and portC has just one.
expected result:
ID. Name.
23301
24401
99501
87701
22201

Answer 1

I could fix it by changing the way I was implementing it.
{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>
)
})
})
}