Grid 4.2.0 - New unique "key" prop warning

[Kyle]

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.

[Stefan]

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

[Kyle]

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.

[Kyle]

Confirmed the fixed today in 4.3.0: https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/#def3e9c3-6da9-5c27-877b-c85605f7a6a1

[Yong]

I'm getting this error in v4.5

[Stefan]

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

[Yong]

I tried that but still seeing the same error. 

[Stefan]

Hello, Yong,

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

Regards,
Stefan
Progress Telerik

[Yong]

Hi Stefan,

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

[Stefan]

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

[Yong]

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;

[Yong]

Hi any update?

 

[Yong]

Thanks for your assistance. The problem seems to have resolved itself. Not sure why.