Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When using getFieldList with getInputProps, warning of key prop #542

Closed
AkifumiSato opened this issue Mar 26, 2024 · 0 comments
Closed

When using getFieldList with getInputProps, warning of key prop #542

AkifumiSato opened this issue Mar 26, 2024 · 0 comments

Comments

@AkifumiSato
Copy link

AkifumiSato commented Mar 26, 2024

Describe the bug and the expected behavior

When getFieldList and getInputProps are used together, warn is displayed about the key prop being spread. I can work around this by explicitly setting key={undefined}, but it seems redundant.

Conform version

v1.0.6

Steps to Reproduce the Bug or Issue

  1. form code:
export default function Form() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: teamSchema });
    },
    shouldValidate: "onBlur",
  });
  const members = fields.members.getFieldList();

  return (
    <form {...getFormProps(form)} noValidate>
      <button
        type="submit"
        {...form.insert.getButtonProps({
          name: fields.members.name,
        })}
      >
        Add member
      </button>
      {members.map((member, index) => {
        const memberFields = member.getFieldset();

        return (
          <div key={member.key}>
            <div>Member {index + 1}</div>
            <input type="hidden" name={memberFields.id.name} value={index} />
            <label>
              engineer:&nbsp;
              <input
                {...getInputProps(memberFields.engineer, {
                  type: "checkbox",
                })}
                key={undefined}
              />
            </label>
          </div>
        );
      })}
      <button type="submit">submit</button>
    </form>
  );
}
  1. Add member click
  2. console.error

Warning: A props object containing a "key" prop is being spread into JSX:
let props = {key: someKey, id: ..., name: ..., form: ..., type: ...};
<input {...props} />...

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

Repository owner locked and limited conversation to collaborators Mar 27, 2024
@edmundhung edmundhung converted this issue into discussion #545 Mar 27, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant