Passing custom props where Typescript is being used

2 posts, 1 answers
  1. SoH
    SoH avatar
    9 posts
    Member since:
    Jun 2017

    Posted 23 Jul 2020 Link to this post

    My custom component for a custom cell is created using Typescript:

    1.import {GridCellProps} from '@progress/kendo-react-grid';
    2. 
    3.export class CustomCell extends React.Component<Readonly<GridCellProps>> {
    4.    ...
    5.}

    I am trying to pass a custom prop to it: 

    MyCustomCell = (props) => <CustomCell {...props} myProp={this.customData} />

    But get the error:
    Property 'myProp' does not exist on type 'Readonly<Readonly<GridCellProps>> & Readonly<{ children?: ReactNode; }>'.

    How can I get past the TS constraint?

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 23 Jul 2020 Link to this post

    Hello,

    This is expected as myProp is not part of the GridCellProps interface.

    This can be resolved by passing `any` to the props type instead of GridCellProps, as this is a custom cell and it is expected to have different props.

    Using GridCellProps is not required in this case, and can be replaced with no issues.

    If you still prefer to keep all GridCellProps, a new interface MyCustomCellProps can be done that will extend the GridCellProps and add the new props like myProp and more.

    Regards,
    Stefan
    Progress Telerik

Back to Top