I have a loop that creates input fields. I managed to make it validate using react-hook-form and yup. but I cannot get the error message because of a variable issue...
{Object.getOwnPropertyNames(row)?.map((head) => {
return (
<div key={head} className="row my-2">
<div className="col-5">{createHeads(head)}</div>
<div className="col-7">{createInputs(head)}</div>
<div className="col-12">
<small className="text-danger">{errors.head?.message}</small>
</div>
</div>
);
})}
So head is a variable that contains the name of the input field. but it's not using that variable . is there a way around it?
--Edit
function createInput(head){
return <input type="text" name="head" {...register(head)} />
}
{Object?.getOwnPropertyNames(row)?.map((head) => {
const error = Object.getOwnPropertyNames(errors).filter((error) => error == head);
return (
<div key={head} className="row my-2">
<div className="col-5">{createHeads(head)}</div>
<div className="col-7">{createInputs(head)}</div>
<div className="col-12">
<small className="text-danger">{errors[error]?.message}</small>
</div>
</div>
);
})}
Update im just dumb edit :
{Object?.getOwnPropertyNames(row)?.map((head) => {
return (
<div key={head} className="row my-2">
<div className="col-5">{createHeads(head)}</div>
<div className="col-7">{createInputs(head)}</div>
<div className="col-12">
<small className="text-danger">{errors[head]?.message}</small>
</div>
</div>
);
})}