[data grid] Warning: A props object containing a "key" prop is being spread into JSX

[S-e-b-a-s]

Steps to reproduce

Link to live example: StackBlitz Example

The reproduction case was built using the DataGrid template provided MUI-X Support without any modifications.
This warning also appears in the DataGrid sandbox example on the MUI-X Getting Started page.

Steps:

1. Open the example.
2. Click the options of any column header.
3. Select the Filter option.
4. Choose the filter option Is any of.
5. Insert any value to filter.

Complete traceback:

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, variant: ..., size: ..., label: ..., className: ..., disabled: ..., data-tag-index: ..., tabIndex: ..., onDelete: ...};
  <ForwardRef(Chip) {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {variant: ..., size: ..., label: ..., className: ..., disabled: ..., data-tag-index: ..., tabIndex: ..., onDelete: ...};
  <ForwardRef(Chip) key={someKey} {...props} />
    at Autocomplete (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/Autocomplete/Autocomplete.js:422:59)
    at GridFilterInputMultipleValue (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/panel/filterPanel/GridFilterInputMultipleValue.js:21:7)
    at div
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at FormControl (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/FormControl/FormControl.js:92:59)
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at div
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at GridFilterForm (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/panel/filterPanel/GridFilterForm.js:109:7)
    at div
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at GridPanelContent (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/panel/GridPanelContent.js:43:7)
    at div
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at FocusTrap (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/Unstable_TrapFocus/FocusTrap.js:86:5)
    at GridPanelWrapper (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/panel/GridPanelWrapper.js:46:7)
    at GridFilterPanel (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/panel/filterPanel/GridFilterPanel.js:33:59)
    at div
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at Paper (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/Paper/Paper.js:70:59)
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at ClickAwayListener (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/ClickAwayListener/ClickAwayListener.js:37:5)
    at div
    at PopperTooltip (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/Popper/BasePopper.js:63:7)
    at Portal (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/Portal/Portal.js:34:5)
    at Popper (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/Popper/BasePopper.js:186:7)
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at Popper (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/material@5.16.7/node/Popper/Popper.js:43:53)
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/panel/GridPanel.js:51:7)
    at GridPreferencesPanel (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/panel/GridPreferencesPanel.js:20:59)
    at GridHeader (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/GridHeader.js:16:60)
    at div
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at GridRoot (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/components/containers/GridRoot.js:36:60)
    at GridContextProvider (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/context/GridContextProvider.js:16:3)
    at DataGrid (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/x-data-grid@7.13.0/node/DataGrid/DataGrid.js:35:56)
    at div
    at eval (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@emotion/react@11.13.3/dist/emotion-element-b1930563.cjs.js:73:23)
    at Box (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/system@5.16.7/createBox.js:31:41)
    at Demo (https://aonirqlrkr.github.stackblitz.io/~/src/demo.tsx:45:56)
    at StyledEngineProvider (https://aonirqlrkr.github.stackblitz.io/turbo_modules/@mui/styled-engine@5.16.6/node/StyledEngineProvider/StyledEngineProvider.js:27:5)

Possible issue related with MUI Core mui/material-ui#39833

Context

I'm in the process of migrating all my DataGrid components to the latest major version. During testing, I encountered this warning.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
  Binaries:
    Node: 18.17.1 - /usr/bin/node
    npm: 9.6.7 - /usr/bin/npm
    pnpm: 8.6.12 - /usr/bin/pnpm
  Browsers:
    Google Chrome 127.0.6533.120 (Build oficial) (64 bits)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/icons-material: ^5.16.7 => 5.16.7
    @mui/lab: 5.0.0-alpha.173 => 5.0.0-alpha.173
    @mui/material: ^5.16.7 => 5.16.7
    @mui/x-data-grid: ^7.13.0 => 7.13.0
    @types/react: ^18.3.4 => 18.3.4
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1

Search keywords: datagrid, chip, filter,

[michelengelen]

Thanks for raising this @S-e-b-a-s ... I can confirm this bug and have found the cause of it.
Since this is a fairly easy fix we can open this up as a good first issue! 👍🏼

here is a diff with a potential fix:

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
index e62a47501..6482be992 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -65,14 +65,18 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
       value={filterValueState}
       onChange={handleChange}
       renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <rootProps.slots.baseChip
-            variant="outlined"
-            size="small"
-            label={option}
-            {...getTagProps({ index })}
-          />
-        ))
+        value.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <rootProps.slots.baseChip
+              variant="outlined"
+              size="small"
+              label={option}
+              key={key}
+              {...tagProps}
+            />
+          );
+        })
       }
       renderInput={(params) => (
         <rootProps.slots.baseTextField

[sai6855]

@michelengelen pr opened #14302

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@S-e-b-a-s: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.