I am creating an abstract grid and my main component is a and the table have the 3 components (like a normal table) and and I have an option to choose if I want to use the default TableBody, TableHeader or TableFooter or to pass in my own e.g. .

The question is how can I pass the tablebody2 to and use the data like the default TableBody components.

Here is how I define what component to use (if null use default):

```
let templates = {
  header: null,
  body: <TableBody2 data={this.state.data}/>,
  footer: null

```

And here is how I'am passing the component to table:

```
<Table options={this.state.options} data={this.state.data} templates={templates}/>

```

And I'm not quite getting how I'am I suppose to access the data props of inside 

Resolved:
In my Table component I call my component(TableBody2) like this (this.props.templates.body(this.props)) and pass it the props of Table so I can access data like this

```
    function TableBody2(props){
  const tableData = props.data.map((data) => {
    return (
    <td key={data.userId}>{data.userId}</td>
  )
  });
  return (    
    <tbody>
    <tr>
    {tableData}
  </tr>
  </tbody>

  )
} 

```