How do you listen for changes to a formik field?

See original GitHub issue

❓Question

I have a UI that I want to respond to the selected values of a formik form. It’s a pricing UI where selecting different options results in a different total price. I need to be able to connect a listener for when a formik field has setFieldValue() called on it. I don’t see such a function in formik so the way I’ve gotten around it is to duplicate the form schema as values in the state and every time I call setFieldValue() I also mutate the corresponding state value in the same way.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

34reactions
jaredpalmercommented, Nov 13, 2018

Can you just move this logic to your render function and determine price/what fields to show based on values?

22reactions
lkostrowskicommented, Mar 28, 2019

I recently needed to subscribe on some value. My input was editable with handleChange and also manually with setFieldValue. So to avoid multiple listeners, I just used hook like this:

    useEffect(() => {
        if (!isSanitized(values.field)) {
            setFieldValue('radius', sanitize(values.field));
        } else {
            action(values.field);
        }
    }, [values.field]);

Cheers

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to listen for changes on formik field with nested values?
I figure it out, I need to use getIn from formik import { useFormikContext, getIn } from `formik` const MyComponent = ({ name...
Read more >
How to listen to Formik onChange event in React?
How to listen to Formik onChange event in React? · #1 Attach callback function on <form> element / component · #2 Create a...
Read more >
API Reference - Formik
Set the value of a field imperatively. field should match the key of values you wish to update. Useful for creating custom input...
Read more >
A guide to React forms and events using Formik
Field component in Formik is used to automatically set up React forms with Formik. It's able to get the value by using the...
Read more >
How to check if Formik values have changed on submit
So I am using Formik for building forms in React. But there's a missing piece of functionality. That is when you submit a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found