Custom column template => Warning: Each child in a list should have a unique "key" prop.

[Laurin S]

Hi, I've created a custom template for a Grid column. Unfortunately, I'm always getting the following error (warning), although I'm specifing the id and key property as suggested by the official React doc:

Warning: Each child in a list should have a unique "key" prop. Check the render method of `CheckBoxComponent`. See https://reactjs.org/link/warning-keys for more information.    at input    at CheckBoxComponent

I have the following code (simplified):

const getCheckboxTemplate = () => {

    return (data) => {

        return (

            <CheckBoxComponent

                id={data.index} //also tried with data.id => Guid

                key={data.index} //also tried with data.id => Guid

                checked={true}

                cssClass="e-small"

            />

        );

    };

};

return (

    <GridComponent>

        <ColumnsDirective>

            <ColumnDirective

                field="done"

                headerText="Done"

                template={getCheckboxTemplate()}

            />

        </ColumnsDirective>

    </GridComponent>

);

Any suggestions?

[Shalini Maragathavel]

Hi Laurin, 

Greetings from Syncfusion Support.


Based on your query we suspect that you are facing an issue while rendering checkbox component in a Grid Column. So, We have prepared a sample to render checkbox component in a column using columnTemplate feature of Grid but we did not face the mentioned issue at our end.

Please find the sample for your reference, 

Sample : https://stackblitz.com/edit/react-udekbg-mv6rhj?file=index.js


Please refer the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/#column-template 

If you are still facing the issue, kindly share the following details that will be helpful for us to provide better solution. 

 

1)  Share your complete Grid rendering code. 

2)  If possible please replicate the issue in the attached sample. 


3)  Syncfusion package version. 

4) Share the screenshot or video demonstration of an error that you have faced in your application 

Regards,
Shalini M.