search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.05k stars 1.25k forks source link

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

Closed S-e-b-a-s closed 2 weeks ago

S-e-b-a-s commented 3 weeks ago

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 https://github.com/mui/material-ui/issues/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 commented 2 weeks ago

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 commented 2 weeks ago

@michelengelen pr opened https://github.com/mui/mui-x/pull/14302

github-actions[bot] commented 2 weeks ago

:warning: 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.