Typescript error when using Grid with child and any prop set

1 Answer 1149 Views
Grid
Artur
Top achievements
Rank 1
Artur asked on 20 Apr 2022, 03:56 PM

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. 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 20 Apr 2022, 08:45 PM

Hello Artur,

Thank you for reaching out to us.

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

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

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Artur
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or