This is a migrated thread and some comments may be shown as answers.

Grid 4.2.0 - New unique "key" prop warning

12 Answers 350 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 2
Veteran
Kyle asked on 08 Jan 2021, 09:33 PM

Since upgrading to @4.2.0, I'm getting:

"Warning: Each child in a list should have a unique "key" prop.

Check the render method of `KendoReactGrid`. See https://fb.me/react-warning-keys for more information.
    in tr (created by KendoReactGrid)
    in KendoReactGrid (created by BatchesGrid)
    in BatchesGrid (created by Context.Consumer)"

(This is a snippet of the callstack.)

I haven't been able to reproduce in StackBlitz.  I'll try to do more troubleshooting next week.  I wasn't sure if you guys were getting it on your end or not.

12 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 11 Jan 2021, 06:02 AM

Hello, Kyle,

We have a known issue for that warning when the Grid has no data:

https://github.com/telerik/kendo-react/issues/824

If this is the same case, please monitor the GitHub item for updates.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Kyle
Top achievements
Rank 2
Veteran
answered on 11 Jan 2021, 02:51 PM

NICE!

First, glad to know I wasn't wrong in that it's only since version 4.2.0.

Second, I didn't notice it was only for a No Records Found.

Glad you know about it.

0
Kyle
Top achievements
Rank 2
Veteran
answered on 15 Jan 2021, 02:05 PM
0
Yong
Top achievements
Rank 1
answered on 24 Mar 2021, 06:29 PM
I'm getting this error in v4.5
0
Stefan
Telerik team
answered on 25 Mar 2021, 05:58 AM

Hello, Yong,

We tested with version 4.5.0, but the error was not reproducible:

https://stackblitz.com/edit/react-hz3yeg?file=app/main.jsx

Please ensure that the latest version is installed and there is no cached older version.

This can be done by deleting the node_modules and deleting the package-lock.json file

Regards,
Stefan
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.

0
Yong
Top achievements
Rank 1
answered on 25 Mar 2021, 02:06 PM
0
Stefan
Telerik team
answered on 25 Mar 2021, 02:10 PM

Hello, Yong,

Could you please share an example where the warning is visible?

Regards,
Stefan
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.

0
Yong
Top achievements
Rank 1
answered on 25 Mar 2021, 02:13 PM

Hi Stefan,

Thanks for your help. That's the first image, from my console.

0
Stefan
Telerik team
answered on 25 Mar 2021, 02:29 PM

Hello, Yong,

Apologies for not being specific enough.

I meant a runnable example where we can test and see why it is happening even with the latest version.

Regards,
Stefan
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.

0
Yong
Top achievements
Rank 1
answered on 25 Mar 2021, 02:43 PM

Hi Stefan,

It seems that I can't upload my tsx file. 

I will copy it here:

 

import React, { useState } from 'react';
import { useQueryClient } from 'react-query';
import { useListUsersQuery } from '../../http/useListUsersQuery';
import { Grid, GridColumn as Column, GridDataStateChangeEvent } from '@progress/kendo-react-grid';
import { process } from '@progress/kendo-data-query';
import CircularProgress from '@material-ui/core/CircularProgress';
const UsersList = (): JSX.Element => {
// prefetch users list
const { isLoading, status, data } = useListUsersQuery();
// display users list data from cache
// listUsersData object needs to be more precisely typed than any
const queryClient = useQueryClient();
const listUsersData: any = queryClient.getQueryData('listUsers');
// toggle UsersList display
const [listUsersClicked, setListUsersClicked] = useState(false);
const handleShowUsersList = () => setListUsersClicked(true);
const handleHideUsersList = () => setListUsersClicked(false);
interface IGridDataState {
gridDataState: {
skip?: number | undefined;
take?: number | undefined;
};
}
// for Grid pagination, sorting, and filtering
const [state, setState] = useState<IGridDataState | undefined>({
gridDataState: {
skip: 0,
take: 5,
},
});
const dataStateChange = (event: GridDataStateChangeEvent) => {
setState({
gridDataState: event.dataState,
});
};
return isLoading ? (
<CircularProgress />
) : !listUsersClicked ? (
<div>
<button onClick={handleShowUsersList}>SHOW USERS LIST</button>
</div>
) : (
<div>
<button onClick={handleHideUsersList}>HIDE USERS LIST</button>
<Grid
data={process(listUsersData.data.response.users, state ? state.gridDataState : {})}
filterable={true}
sortable={true}
{...state?.gridDataState}
pageable={true}
onDataStateChange={dataStateChange}
>
<Column field='username' title='User Name' />
<Column field='email' title='Email' />
<Column field='id' title='ID' />
</Grid>
</div>
);
};
export default UsersList;

0
Yong
Top achievements
Rank 1
answered on 25 Mar 2021, 06:08 PM

Hi any update?

 

0
Yong
Top achievements
Rank 1
answered on 26 Mar 2021, 01:27 PM
Thanks for your assistance. The problem seems to have resolved itself. Not sure why. 
Tags
General Discussions
Asked by
Kyle
Top achievements
Rank 2
Veteran
Answers by
Stefan
Telerik team
Kyle
Top achievements
Rank 2
Veteran
Yong
Top achievements
Rank 1
Share this question
or