React table with JSON subdocument data only - reactjs

Question

I have nested arrays in JSON object that comes from CosmosDB. I have 3 subdocuments in the JSON which I want to display that data into a react table for each subdocument. How can we map each subdocument to a React Table Rows?
Below is the screenshot that I am expecting.
below is JSON data
[
{
"id": "DD3",
"studydate": "DDD",
"studydescription": "DD3 Description",
"studyname": "DD3",
"table1": [
{
"no": "1",
"name": "DD3 Name",
"date": "Krishna",
"description\r": "1111\r"
},
{
"no": "2",
"name": "DD3 Nam2",
"date": "Test2",
"description\r": "2222\r"
},
{
"no": "3",
"name": "DD3 Name3",
"date": "Test3",
"description\r": "3333"
}
],
"table2": [
{
"No": "2",
"Study Field1": "21",
"Study Field2": "22",
"Study Field3\r": "23"
}
],
"table3": [
{
"No": "3",
"Study Field5": "T31",
"Study Field6": "T32",
"Study Field7": "T33",
"Study Field 8\r": "T34"
}
],
"_rid": "QeNcANZFTTIKAAAAAAAAAA==",
"_self": "dbs/QeNcAA==/colls/QeNcANZFTTI=/docs/QeNcANZFTTIKAAAAAAAAAA==/",
"_etag": "\"33002e92-0000-0200-0000-5fa6fe320000\"",
"_attachments": "attachments/",
"_ts": 1604779570
}
]

Answer 1

I have a basic example of how you could generate the rows off JSON. I am just using basic HTML to keep it simple as the prop names will change depending what component you go with but same principle.
JavaScript for filtering and pushing to table array.
let rowArr = [];
Object.keys(data).forEach(function(key) {
rowArr.push(data[key])
})
HTML/JS
<table>
<!-- This should loop through rows allowing you to get row values -->
{rowArr.map(row => (
<tr key={row}>
<td>{row.Task}</td>
<td>{row.Description}</td>
<td>{row.Assignee}</td>
<td>{row.Client}</td>
<td>{row.Contact}</td>
</tr>
))}
</table>
Here is a simple JSON structure
let data =
{
1:{
Task: "Software",
Description: "Mockup designs",
Assignee: "John Doe",
Client: "Mark Wong",
Contact: "mark.wong#gmail.com"
}
}