How to handle multiple forms in .map in reactjs using react-hook-form? the problem is when I click the button all forms get triggered and show errors like in this image Image Error , and the thing is I want every form be separate from each other and activate just when I click a button and obtain the data corresponding
{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>
))}
I think the map is correct my guess is that when you use onSubmit={handleSubmit2(ChangeProductStatus)} you are executing the function so I think you need to change to a function similar to the one for onClick. Something like:
<form onSubmit={() => handleSubmit2(ChangeProductStatus)}>
Just in case that you don't want to refresh the page after submit you can change the button type to 'button' instead of 'submit'