0
197
ViewsCan't pass proper value in form, react
I have created a form in react using Formiz. But it's not sending right value.
Here is a working CodeSandbox: https://codesandbox.io/s/formiz-pricing-wizard-forked-fcnsn?file=/src/fields/fieldradio.js
Currently it is sending me this value:
But it should send me this value:
I already tried changing step1.js from this:
const transformOptions = (options) =>
options.map(({ subCategory, price, radioImage }, i) => ({
label: <span>{subCategory}</span>,
id: `${subCategory}-${i}`,
value: `${price}`,
image: radioImage
}));
To this:
const transformOptions = (options) =>
options.map(({ subCategory, price, radioImage }, i) => ({
label: <span>{subCategory}</span>,
id: `${subCategory}-${i}`,
value: `${subCategory} - ${price}`,
image: radioImage
}));
It sends me the right values but totalPrice function in MyForm.js stops working:
const totalPrice = React.useMemo(() => {
return categories.reduce(
(total, c) =>
total + (myForm.values[c] ? parseInt(myForm.values[c], 10) : 0),
0
);
}, [myForm.values]);
Will anyone please help me to fix it? Because I've been trying to find a solution for hours but still couldn't find one and can't wrap my head around what's going wrong!
1 answers
Answer question0
Since you modified value from ${price} to ${subCategory} - ${price} now your totalPrice is broken because in myForm.values[c] there is no more just the price but the subCategory also.
To solve this it's just necessary fix your totalPrice in this way:
const totalPrice = React.useMemo(() => {
return categories.reduce(
(total, c) =>
total +
(myForm.values[c]?.split("-")[1]
? parseInt(myForm.values[c]?.split("-")[1], 10)
: 0),
0
);
}, [myForm.values]);
I replaced myForm.values[c] with myForm.values[c]?.split("-")[1] in order to "clean" value from subCategory part and leave just price.
Here your codesandbox modified.