Import child component to use in a html table structure - reactjs

Question

I want to import a component with a child component using specified HTML markup
I am almost there I guess, but I have some problem with the exporting. Added som more data.
usingTable.js
import React, { Component } from "react";
import tableHeader from ".components/data/tableHeader.json";
import Rows from ".components/data/rows.json";
import Table, {Row} from "./components/table.js";
class UsingTable extends Component {
render() {
return(
<>
<Table tableHeader={TableHeader} rows={Rows}>
<Row>
<td colSpan="2">A</td>
<td>B</td>
<td>C</td>
</Row>
</Table>
</>
);
}
}
export default UsingTable;
I don't know if this is the right setup. Maybe someone can give me a hand on this?
table.js
import React, { Component } from "react";
class Table3 extends Component {
render() {
const tableHeader = this.props.tableHeader.map((col,i) => (
<th>
{col}
</th>
))
const row1 = this.props.row.map((row,i) => (
<td>
{row}
</td>
))
return (
<table>
<thead>
<tr>
{tableHeader}
</tr>
</thead>
<tbody>
{Row1}
{Row}
</tbody>
</table>
)
}
}
export default Table3;
export const Row = props => {
return <tr>{props.children}</tr>
}
I want the result to be
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-->
<tr>
<td colSpan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<!-->
</tbody>
</table>```

Answer 1

In your UsingTable your passing 2 props (tableHeader and rows) and 1 child (Row)
Then, in your Table3 component your mapping over tableHeader, which is a valid prop and over this.props.rows which doesn't look like its defined (row should be called rows)
If you want to use the Row child that you passed in, you need to access it using this.props.children
For example, stick {this.props.children} underneath {Row}. Hope that helps