0
292
ViewsReact-Hook Form: How do I convert the value of the quantity into a number that is inside the useFieldArray?
I have already declared the input to only receive numbers:
<input
type="number"
name={`order[${nestIndex}].variantion[${k}].qty`}
ref={register({ required: true })}
defaultValue={item.qty}
style={{ marginRight: "25px" }}
/>
But this would still save as a string. How can I convert the value of the quantity into a number or if I could parse this into an integer?
The quantity input field is in the nestedFieldArray
export default ({ nestIndex, control, register }) => {
const { fields, remove, append } = useFieldArray({
control,
name: `order[${nestIndex}].variation`
});
return (
<div>
{fields.map((item, k) => {
return (
<div key={item.id} style={{ marginLeft: 20 }}>
<label>{k + 1}</label>
<input
type="number"
name={`order[${nestIndex}].variantion[${k}].qty`}
ref={register({ required: true })}
defaultValue={item.qty}
style={{ marginRight: "25px" }}
/>
<Size
name={`order[${nestIndex}].variantion[${k}].color`}
menuItems={colorItems}
refer={register({ required: true })}
defaultValue={item.color}
control={control}
/>
</div>
);
})}
<hr />
</div>
);
};
I recreated this in: https://codesandbox.io/s/react-hook-form-data-in-step-1-and-step-2-with-nestedarray-7hyksh?file=/src/nestedFieldArray.js:485-1532
This is what the data looks like in the console:
·
Juan Pablo Isaza
1 answers
Answer question0
On handler submit you can change product qty into integer using parseInt() and push it into the new child array and after the all product detail convert it then you can push it into new parent array.
const onSubmit = (data) => {
const newOrder = [];
data.order.forEach(({ product, variantion }) => {
const newVariantion = [];
variantion.forEach(({ qty, color }) => {
newVariantion.push({ qty: parseInt(qty), color });
});
newOrder.push({ product, variantion: newVariantion });
});
action(newOrder);
console.log(newOrder);
push("/step2");
};
·
Juan Pablo Isaza
Report
Answer question