react `GridComponent` does not properly render a child component

[jimmy-e]

Please see this codesandbox

Syncfusion react data grids seem to be having problems when a piece of the component is broken up into a separate, child component and rendered in said parent component. In the codesandbox, 'Grid One' renders as expected and is written per the example here, however, if I break up the ColumnsDirective into a separate child component, the data grid does not behave as expected. How can I take the data grid and have it render as expected while using child components inside of the GridComponent api? Thanks!

gridTwo.tsx:

import * as React from "react";
import {
  ColumnDirective,
  ColumnsDirective,
  GridComponent,
  Inject,
  Page
} from "@syncfusion/ej2-react-grids";
import { data } from "./data";

const pageSettings = { pageSize: 3 };

const ChildComponent: React.FC = (props: Object) => (
  <ColumnsDirective {...props}>
    <ColumnDirective field="OrderID" width="100" />
    <ColumnDirective field="CustomerID" width="100" />
    <ColumnDirective field="EmployeeID" width="100" />
    <ColumnDirective field="Freight" width="100" />
    <ColumnDirective field="ShipCountry" width="100" />
  </ColumnsDirective>
);

const GridTwo: React.FC = () => (
  <GridComponent
    dataSource={data}
    allowPaging={true}
    pageSettings={pageSettings}
  >
    <ChildComponent />
    <Inject services={[Page]} />
  </GridComponent>
);

export default GridTwo;

[BalajiSGrid]

Hi Jimmy,

Thanks for contacting Syncfusion support.

We have validated your query with the information provided. We cannot render the custom react component(it has a list of Grid column directives) inside of GridComponent directive and we suggest you bind the Grid’s columns through ColumnDirective using looping concept. Please refer to the below code example and sample for more information.

gridTwo.tsx:

`
const gridcolumns = [
{ field: "OrderID" },
{ field: "CustomerID" },
{ field: "EmployeeID" },
{ field: "Freight" },
{ field: "ShipCountry" }
];

<GridComponent 
dataSource={data} 
allowPaging={true} 
pageSettings={pageSettings} > 
<ColumnsDirective>
  {gridcolumns.map((col: any) => ( 
    <ColumnDirective field={col.field} width="100" /> 
  ))} 
 </ColumnsDirective> 
 <Inject services={[Page]} /> 
 </GridComponent> 

`

Sample link: https://codesandbox.io/s/syncfusion-grid-debug-wjv6w?file=/src/gridTwo.tsx

Please get back to us, if you need further assistance.

Regards,
Balaji Sekar

[jimmy-e]

Ok thanks Balaji!