jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
34.01k stars 2.79k forks source link

handleChange can't target state values with delimiters #3925

Open YoussefEgla opened 12 months ago

YoussefEgla commented 12 months ago

Bug report

handleChange can't target state keys with delimiters ex: traits.email Does not work on browser and react native

Current Behavior

having an initial value {["traits.email"]: "", ["traits.password"]: ""} doesn't update on value change when using props.handleChange("traits.email")

However when I directly update the react state it does work as expected

Expected behavior

The value should update when using onChangeText={props.handleChange("traits.email")} in react native and onChange{props.handleChange} in browser (made sure name is set)

Reproducible example

The following example clearly shows what happens Reproducible example

Suggested solution(s)

Currently, I am updating the internal react state directly which works as expected. I couldn't target the location where the state gets updated in Formik lib (skimmed through it TBH)

const handleChange = (k: string) => (t: string) => {
  formik.setValues({ ...formik.values, [k]: t });
};

Additional context

These IDs approach are used by kratos

Your environment

Software Version(s)
Formik 2.4.5
React 18.2.0
React Native 0.72.6
Expo 49.0.15
TypeScript 5.1.3