Search code examples
reactjsformikformik-material-ui

Formik Field not displaying entered value

https://codesandbox.io/s/friendly-bohr-mjyhc

This is the code snippet of my form, I have created a field and I want to change its value onChange. I don't see the value changing on the screen and when I console log the event.target.value I only see the current letter being replaced from the previous letter (if I type AB, the console log values show A and then it replaces to B)

Solution

  • Formik library itself provides various method to handle the complexity.

    In your code rather than adding a custom handle Change you can directly use handleChange method.

    Simply replace -

    onChange={customChange}

    with

    onChange={handleChange}

    to make this work.

    FYI - I also printed values so that you can see the formik bag of values.

    Here is the working code - Code Sandbox

    EDIT 1 -

    If you want to update the value from a custom handler then you can use setFieldValue for setting the field value.

    Working Code - CodeSandBox 1