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

[MoSattler]

Describe the bug and the expected behavior

I am getting a console error in Next when using conforms getInputProps.

Conform version

1.1.2

Steps to Reproduce the Bug or Issue

<input {...getInputProps(fields.id, { type: 'hidden' })} />

I get the error message

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, id: ..., name: ..., form: ..., type: ...};
  <input {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {id: ..., name: ..., form: ..., type: ...};
  <input key={someKey} {...props} />

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

[edmundhung]

You can remove the warning by explicitly setting the key like this:

<input {...getInputProps(fields.id, { type: 'hidden' })} key={fields.id.key} />

The react team seems to against spreading an object with key on the element and likely adding this warning to react 18.3 as well 😅 There is nothing I can really do because the whole point of spreading an object is to minimise the need to setting each property yourself. If they want you to be explicit, then we have to be explicit...

[MoSattler]

Would it be sensible to omit the key from getInputProps then?

[edmundhung]

I would say no. Although the key is needed only for some features, it is better to have it set then realize it wasn't working later 😅 Maybe consider creating your own Input component so you don't need to repeat this manually.

[MoSattler]

Fair enough! I was worried that this might eventually cause issues with React (otherwise, why would they warn about it?), and that console errors might trip people up.