getFieldValue or similar in Formik

Question

Is there a way to get the value of a field inside a click handler in formik?

You can use setFieldValue in there, so I'd assume (but can't find anywhere) that Formik should have something like that for retrieving values:

<Button onClick={() => getFieldValue('name') === 'Test' ? action1 : action2}

What is the correct way to do this in Formik?

Answer 1

Formik passes its values object into your form via props. Imagine you have an input, wired into Formik under the name firstName. You can access the input's value via this.props.values.firstName:

<button onClick={() => console.log(this.props.values.firstName)}>
  Log firstName
</button>

I've test this and verified. It's also demonstrated in several places in the documentation.

Answer 2

You can access the current Formik values through onChange

const [currentValues, setCurrentValues] = useState<UserViewModel>();
...

return (
<>
    <Formik
         initialValues={user}
         onChange={({ nextValues }) => { setCurrentValues(nextValues); }}
    >
    ...
    </Formik>
</>

or use a custom React hook

import React from 'react';
import { useField } from 'formik';

const FormSpan = ({ name }) => {
    const [field] = useField(name);
    return (
        <span>{field.value}</span>
    );
};

export default FormSpan;

and inside the Formik

<FormSpan name="preTitle" />