How to get value inside formik out using useEffect? - reactjs

Question

my full code
https://codesandbox.io/s/testproducr02-bg7exz?file=/index.tsx
const [sum, setSum] = useState(0);
const [qty, setQty] = useState(0);
useEffect(() => {
const sum = values.product.reduce((acc, item) => acc + item.qty * 1, 0); //error values is not defined
setSum(sum);
});
useEffect is outside formik, but I don't know how to get the value out
this is inside my formik
<Formik
initialValues={initialValues}
onSubmit={async (values) => {
await new Promise((r) => setTimeout(r, 500));
//alert(JSON.stringify(values, null, 2));
// const sum = values.product.reduce(
// (acc, item) => acc + item.qty * 1,
// 0
// );
// setSum(sum);
}}
>
{({ values }) => (
<Form>
<FieldArray name="product">
{({ insert, remove, push }) => (
<div>
{values.product.length > 0 &&
values.product.map((friend, index) => (
<div className="row" key={index}>
<div className="col">
<label htmlFor={`product.${index}.productname`}>
Productname
</label>
<Field
name={`product.${index}.productname`}
placeholder="productname"
type="text"
/>
</div>
<div className="col">
<label htmlFor={`product.${index}.qty`}>Qty</label>
<Field
name={`product.${index}.qty`}
placeholder="qty"
type="number"
/>
</div>
<div className="col">
<button
type="button"
className="secondary"
onClick={() => remove(index)}
style={{ marginTop: "10px" }}
>
Delete
</button>
</div>
</div>
))}
<label>Sum</label>
<Field
name={`sum`}
placeholder="sum"
type="text"
value={sum}
disabled
/>
<br />
<button
type="button"
className="secondary"
onClick={() =>
push({ productname: "", qty: 0, price: 0, amount: 0 })
}
>
Add Product
</button>
</div>
)}
</FieldArray>
<p>Qty : {qty}</p>
<p>sum : {sum}</p>
<button type="submit">Summit</button>
</Form>
)}
</Formik>
i want to calculate it without pressing onSubmit

Answer 1

You can use Formik's innerRef prop to attach a ref to the Formik component.
// ...
const formikRef = useRef(null);
// ...
return (
<Formik
initialValues={initialValues}
innerRef={formikRef}
// ...
>
...
</Formik>
);
And then in some useEffect
if (formikRef.current) {
const productData = formikRef.current.values.product
// do something
}
I believe there are other methods too, such as "Formik Context"