Typescript error when using Grid with child and any prop set

[Artur]

I'm trying to integrate Typescript into my current project, but I'm unable to use Grid with it.

Here's the sample code:

import React from 'react';
import {Grid, GridColumn} from "@progress/kendo-react-grid";

export default function App(){
    const data = [{id: 1}];
    
    return <div className="App">
        <Grid data={data}>
            <GridColumn field="id"/>
        </Grid>
    </div>
}

Here's the error:
TS2322: Type '{ children: Element; data: { id: number; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Grid> & Pick<Pick<Readonly<GridProps>, keyof GridProps> & Pick<...> & Pick<...>, keyof GridProps> & InexactPartial<...> & InexactPartial<...>'.   
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Grid> & Pick<Pick<Readonly<GridProps>, keyof GridProps> & Pick<...> & Pick<...>, keyof GridProps> & InexactPartial<...> & InexactPartial<...>'.

This error shows for any Grid's prop, not only data, but if there won't be any Grid's prop set, but only a child - Typescript compiles the code.

Is it only happening on my side? 
Thank you for any help. 

[Konstantin Dikov]

Hello Artur,

Thank you for reaching out to us.

The issue is related with the following breaking change with React 18:

• https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions

We already have logged issue about this and hopefully the fix will be available in the upcoming week:

• https://github.com/telerik/kendo-react/issues/1275

Until the fix, you can use older version of React and the types definitions and upgrade after the fix is available.

Please excuse us for any inconvenience caused by this and if further assistance is needed, do not hesitate to contact us again.

 

Regards,
Konstantin Dikov
Progress Telerik