Formik Form only updates state on second click - reactjs

Question

I am trying to make a checkout form using Formik, however when I click the submit button and log the data to my console I don't see any changes until the second click.
onSubmit={(values) => {
addData(values);
console.log(data);
}}>
const addData = (billing) => {
setData((currentData) => {
const shipping = {
first_name: billing.first_name,
last_name: billing.last_name,
address_1: billing.address_1,
address_2: billing.address_2,
city: billing.city,
state: billing.state,
postcode: billing.postcode,
country: billing.country,
};
return {billing, shipping, ...currentData};
});
};
const [data, setData] = useState({
payment_method: 'bacs',
payment_method_title: 'Direct Bank Transfer',
set_paid: true,
line_items: [
{
product_id: 93,
quantity: 2,
},
{
product_id: 22,
variation_id: 23,
quantity: 1,
},
],
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: '10',
},
],
});
Additionally, when I go to change the data (my form doesn't reset on submission) I still see the old data and it doesn't update.

Answer 1

I just have just passed it and I could resolved it!
It seems like it renders just on next click and then updates.
In order to fix that, please try React useEffect Hook.THis is my example for React Native
import React, { useState, useEffect } from 'react';
import { View, TextInput, Button } from 'react-native';
import { Formik } from 'formik';
export const FormikPub = (props) => {
const [formikPub, setFormikPub] = useState(
{foo: '', bar:''}
)
useEffect(() => {
console.log(`After setFormikPub(): ${JSON.stringify(formikPub)}`)
}, [formikPub]);
return (
<Formik
initialValues={{ foo: '', bar: '' }}
onSubmit={(values) => {
setFormikPub(values)
}}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<TextInput
name='foo'
placeholder="Foo"
onChangeText={handleChange('foo')}
onBlur={handleBlur('foo')}
value={values.foo}
/>
<TextInput
name='bar'
placeholder="Bar"
onChangeText={handleChange('bar')}
onBlur={handleBlur('bar')}
value={values.bar}
/>
<Button color="#004686" onPress={handleSubmit} title="Publish Formik" />
</View>
)}
</Formik>
);
}
It may able to you press the button and it will run only when you change the text input.