[Solved] `key` prop included in `tdProps` object causes React "key in spread" warning

[nEMO]

**Code example:**

// Grid usage
<Grid
  cells={{
    group: {
      groupHeader: (args) => {
        if (args.level === 0) return <BalloonGroupHeader {...args} />
        if (args.level === 1) return <ModuleGroupHeader {...args} />
        return null
      },
    },
  }}
/>

// Custom group header component
const BalloonGroupHeader = (props: GridGroupCellProps) => {
  const { key, ...restTdProps } = props.tdProps as any
  return <td key={key} {...restTdProps} />
}

kendo-react: 8.2.0

"react": "^18.2.0"

[Vessy]

Hi,

The React warning about "key in spread" usually occurs because React uses the key prop internally for its reconciliation process and does not pass it as a DOM attribute. When you spread key onto a <td> element, React will log a warning since key should only be used when rendering lists of elements and not as an attribute on DOM nodes. You could:

• Remove the key prop from the <td> element in your custom group header component.
• React will handle the key internally, so you do not need to manually set it on the <td>.

Updated code snippet

const BalloonGroupHeader = (props: GridCustomCellProps) => {
  const { key, ...restTdProps } = props.tdProps as any;
  return <td {...restTdProps} />;
};

This approach is compatible with KendoReact Grid's custom group header rendering. If you have multiple group levels or need to customize the header further, you can use the groupHeader callback as shown in your example.

For more advanced scenarios, such as displaying item counts or custom titles in the group header, refer to the following KB article:

• https://www.telerik.com/kendo-react-ui/knowledge-base/render-a-custom-content-inside-the-grid-group-header/

Kind regards,
Vessy
Progress Telerik

[nEMO]

Thanks for the reply!

However, I have a follow-up question: why does `props.tdProps` contain `key` in the first place?

According to the React documentation, `key` is a special prop that **is not passed** to the component via `props`.

If `key` appears inside `props.tdProps`, it means that KendoReact explicitly places it there as a regular object property—and that is precisely why a warning occurs when casting to `<td>`.

Questions:
1. Is this intentional behavior on KendoReact’s part—passing `key` inside `tdProps`?
2. If so, why was this approach chosen instead of managing `key` on the Grid side itself?
3. Is using `as any` an officially recommended solution, or is it a temporary workaround?

Using `as any` to bypass TypeScript typing feels like a patch rather than a proper solution. I’d like to understand the root of the problem.

[Vessy]

Hi,

For grouped header cells, the Grid currently includes a `key` value inside `tdProps` so custom group cell templates can preserve the same identity that the default cell rendering uses. This is why `key` may appear in `props.tdProps` even though React does not pass `key` through normal component props.

To address your questions directly:

1. Yes, this is currently intentional for group-header cell rendering.
2. The approach keeps the generated cell metadata together when rendering custom templates (including grouped/sticky scenarios), so the template can apply the same identity/attributes as the built-in renderer.
3. Using `as any` is a workaround, but it is not the only option. A cleaner approach is to cast to `GridTdAttributes`, extract `key`, and pass it explicitly.

  const tdProps = props.tdProps as GridTdAttributes | null;

  if (!tdProps) {
    return null;
  }

  const { key, ...restTdProps } = tdProps;