dohomi/react-hook-form-mui

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

Closed this issue · 10 comments

bestickley commented

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 commented

can you make a reproduction? I dont see this warning

  • 👀1
dohomi commented

closed until a repro is provided

waza-ari commented

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.

  • ❤️1
bestickley commented

@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 commented

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

  • 👍1
waza-ari commented

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

  • 👍1
reihwald commented

The same now also happens in Vite with React 18.3

JackMBurch commented

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

dohomi commented

which version are you using? fix is released in v7

  • ❤️1
JackMBurch commented

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