How to validate an array with react hook form?

Question

I am rendering a form based on what fields are available in selectedAddress. The key variables are all unique but I am seeing a each child in a list must have a unique key error, and the validation is not working. What am I missing?

import { useForm } from "react-hook-form";

const {
  register,
  handleSubmit,
  formState: { errors },
  } = useForm();

const RenderSelectedAddress = () => {
if (selectedAddress && !editAutocompletedForm) {

  const entries = Object.entries(selectedAddress);

  const formEntries = entries.map(([key, value]) => (
    <>
      <label htmlFor={key}>{key}</label>
      <input
        defaultValue={value}
        type="text"
        placeholder="Placeholder"
        id={key}
        {...register( key , { required: "required" })}
      ></input>
      {errors.key && <p>{errors.key.message}</p>}
    </>
  ));

  return formEntries;

}

return null;

};

MorKadosh · Accepted Answer · 2021-10-27 10:45:19Z

1

key prop should be on the first child of the rendered list. In your case, you used a fragment which doesn't accept a key prop in the shortened form. Instead of <>...</> use: <React.Fragment key={key}></React.Fragment>.
For the validation error, I beilieve it's the fact that you access the errors incorrectly. Instead of errors.key, use errors[key].

answered Oct 27, 2021 at 10:45

MorKadosh

6,0053 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shfury Over a year ago

Thanks for the quick answer, this sorted it.. Just wondering r.e #2 This syntax works in another form I am using: {errors.email ? <div>{errors.email.message}</div> : null}. Why are square brackets needed when using an array?

MorKadosh Over a year ago

That's because here your values are dynamic, meaning that accessing errors.key will try to look for a key, with the name key inside errors, while errors[key] will access the value of the current key in the loop inside errors

André Alçada Padez · Accepted Answer · 2021-10-27 10:43:42Z

Every time you do a map, you need to attribute a key attribute with a unique value to what is being rendered. In this case, you should use divs instead of React.Fragment and give it a key...

const formEntries = entries.map(([key, value]) => (
    <div key={value}>
      <label htmlFor={key}>{key}</label>
      <input
        defaultValue={value}
        type="text"
        placeholder="Placeholder"
        id={key}
        {...register( key , { required: "required" })}
      ></input>
      {errors.key && <p>{errors.key.message}</p>}
    </div>
  ));

this is not mandatory, and you get those warnings, but it's very important for React to optimize rendering. Also, the value of key should be a string, not an object.

Please read the docs, pertaining this subject: https://reactjs.org/docs/lists-and-keys.html

Collectives™ on Stack Overflow

How to validate an array with react hook form?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related