Warning: A props object containing a "key" prop is being spread into JSX

[bestickley]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I use the SelectElement I see this warning in console:

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, value: ..., disabled: ..., children: ...};
  <ForwardRef(MenuItem) {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {value: ..., disabled: ..., children: ...};
  <ForwardRef(MenuItem) key={someKey} {...props} />
    at /Users/stickb/Code/dos/lighthouse/ui/.next/server/chunks/31a1f_react-hook-form-mui_dist_esm_db5d8f._.js:836:15
    at div
    at div
    at FeedbackLayout (/Users/stickb/Code/dos/lighthouse/ui/.next/server/chunks/src_app_(shell)_feedback_[id]_7f8e10._.js:220:13)
    at Feedback (/Users/stickb/Code/dos/lighthouse/ui/.next/server/chunks/src_app_(shell)_feedback_[id]_7f8e10._.js:80:13)
    at ...

Expected behavior 🤔

No warning.

Steps to reproduce 🕹

Steps:

Use SelectElement like:

...
<SelectElement control={control} fullWidth name="status" options={[{ id: "Pending", label: "Pending"}, {id: "In Progress", label: "In Progress" }]} />

[dohomi]

can you make a reproduction? I dont see this warning

[dohomi]

closed until a repro is provided

[waza-ari]

I have the same issue in a NextJS 14 environment. It has started to happen with the 7 beta version, it's not happening on the 6.x environment. I'm trying too look into it and trying to find where its coming from.

[bestickley]

@waza-ari, thank you. I've been trying to find the time to reproduce. Will get to it eventually. If you could help that would be awesome.

[dohomi]

I found several issues regarding NextJS and MUI (seems to be connected with Autocomplete)

vercel/next.js#55642
mui/material-ui#39833

But I currently don't know what to do and don't use NextJS myself in any project right now

[waza-ari]

It might be related to this NextJS issue: mui/material-ui#39833, also mentioned on a SO thread. I'm Daniel on this thread asking to confirm what this issue is about.

As far as I can tell it might be about waiting for an upstream fix. The element itself seems to work just fine

[reihwald]

The same now also happens in Vite with React 18.3

[JackMBurch]

Any chance of a release with this fix? Still experiencing it with with Vite + React. Thanks guys!

[dohomi]

which version are you using? fix is released in v7

[JackMBurch]

Ah, I was on the 7.0.0-beta release. Confirmed fixed in 7.0.0. Thanks guys!

[youyoumu]

i hit this bug on AutocompleteElement, which seems to be caused by this line

react-hook-form-mui/packages/rhf-mui/src/AutocompleteElement.tsx

Line 285 in 993e57b

<li {...props}>

i think it should be:

        const { key, ...optionProps } = props;
        return (
          <li key={key} {...optionProps}>

here is the reference
https://mui.com/material-ui/react-autocomplete/#checkboxes

[dohomi]

i hit this bug on AutocompleteElement, which seems to be caused by this line

react-hook-form-mui/packages/rhf-mui/src/AutocompleteElement.tsx

Line 285 in 993e57b

<li {...props}>

i think it should be:

        const { key, ...optionProps } = props;
        return (
          <li key={key} {...optionProps}>

here is the reference https://mui.com/material-ui/react-autocomplete/#checkboxes

would it not be rather {id, ...optionProps} = props ?