CODEWITHSUNDEEP
reactjsnext.jsformikyup
Ruby
Ruby

Reputation: 2929

Formik - "dirty" gets applied to all instances with the same custom component

Current Behavior

When I create a custom input component and try to add a className based on if the input is "dirty" or not, the class gets applied to all the inputs that use this component.

Here's a simple example I created ... https://codesandbox.io/s/hello-world-h60hj

You'll notice that both inputs use the same custom component "InputComponent", and when you start typing in any one of them, the class gets applied to both of them.

I think the "isValid" is also behaving the same way.

Expected behavior

The class should be applied to only the dirty input that I'm typing inside.

Am I doing something wrong here?

Upvotes: 1

Views: 27098

Answers (1)

user11910739
user11910739

Reputation:

You can achieved your output by updating InputComponent.js.

<div>
  <input
    type="text"
    {...field}
    {...props}
    className={
      !isValid && touched[field.name] && errors[field.name] ? "error" : ""
    }
  />
  {!isValid && touched[field.name] && errors[field.name] && (
    <div className="error">{errors[field.name]}</div>
  )}
</div>

https://jaredpalmer.com/formik/docs/api/formik#dirty-boolean

Returns true if values are not deeply equal from initial values, false otherwise. dirty is a readonly computed property and should not be mutated directly.

I have updated your code here
https://codesandbox.io/s/hello-world-w7zwt

Hope this will work for you!

Upvotes: 4

Related Questions