¿Cómo manejar múltiples formularios en .map en reactjs usando react-hook-form? el problema es que cuando hago clic en el botón, todos los formularios se activan y muestran errores como en esta imagen Error de imagen, y quiero que todos los formularios estén separados entre sí y se activen justo cuando hago clic en un botón y obtengo los datos correspondientes.
{Order.orderDetails.map((item, index) => ( <form onSubmit={handleSubmit2(ChangeProductStatus)}> <div className="form-control mb-5"> <label className="text-medium font-semibold">Change Status Order</label> <select {...register2('productStatus', {required: ' Campo Requerido'})} className={(errors2.productStatus && ' select-error ') + ' select select-bordered '}> <option value="Pendiente">Pending</option> <option value="Enviado">Sended</option> </select> </div> <button type="submit" onClick={() => validate(item.idOrderDetail)} className="btn btn-block mb-5 normal-case"> Save </button> </form> ))}Creo que el mapa es correcto. Supongo que cuando usa onSubmit={handleSubmit2(ChangeProductStatus)} está ejecutando la función, así que creo que necesita cambiar a una función similar a la de onClick. Algo como:
<form onSubmit={() => handleSubmit2(ChangeProductStatus)}>En caso de que no desee actualizar la página después de enviar, puede cambiar el tipo de botón a 'botón' en lugar de 'enviar'