Grid 4.2.0 - New unique "key" prop warning

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

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.

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

Hello, Yong,

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

Regards,
Stefan
Progress Telerik

Hi Stefan,

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

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

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;

Hi any update?