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;
};
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
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].