Tengo un bucle que crea campos de entrada. Logré validarlo usando react-hook-form y sí. pero no puedo recibir el mensaje de error debido a un problema variable...
{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> ); })} Entonces head es una variable que contiene el nombre del campo de entrada. pero no está usando esa variable. ¿Hay alguna forma de evitarlo?
--Editar
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> ); })}Actualizar soy solo una edición tonta :
{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> ); })}