Updating a value that is in object format

[mattbesedick]

Hello!

Quick question on how to handle a specific problem I'm dealing with. Currently in my app I am using a regular form with a multitude of handlers based on input. Right now i'm using a datepicker component that on change, returns two values -- v: value, and formatted: f.

My question is, with the handleChange being built into formik, how would I update the date values to reflect my current state in initial values?

Here is the date component, and the respective handleChange function I normally use.

    const [start, setStart] = useState({
            value: currentDate.toISOString(),
            formatted: currentDate.toISOString().split("T")[0],
     })

    <DatePicker
        className="start-date"
        minDate={currentDate.toDateString()}
        onChange={handleStartDate}
        value={start.value}
        showClearButton={false}
        dateFormat="YYYY-MM-DD"
       />

      const handleStartDate = (v, f) => {
            if (end.value && end.value < v) {
                 setEnd("")
                 setStart({ value: v, formatted: f })
             } else {
                 setStart({ value: v, formatted: f })
             }
        }

Thanks for any help!

[johnrom]

The short answer is you would generally only save one version from which all other versions could be recreated. For a date this might be an ISO formatted date, any string which could be parsed with date-fns, or an actual Date object. If the user can type in your input, though, you'll want to store a text based date-like string even if it isn't a valid date, to handle the user typing transient values.

However, to help with your specific use case, it may be beneficial to recreate in a codesandbox and link it here.

[johnrom]

Your library's onChange is providing two values, but which one you declare as "canonical" is up to you. In your case, the one you pass to DatePicker value={} is the one that is really important, as DatePicker requires the ISO format for value. DatePicker is taking that value, which can be parsed into a date object, and then formatting it to your specifications for display to the user (mm/dd/yyyy). The format that you display to the user is actually completely irrelevant to Formik, as you should be able to reconstruct the format from the value no matter what. So you want to take the raw value the DatePicker gives back to you, and pass it to Formik. Then you can format it however you want in both the DatePicker field, and in the submit function.

https://codesandbox.io/s/focused-chaum-sg4su?file=/src/App.js

Note in your example, DatePicker is using the default dateFormat specified by the library, or possibly the one that is automatically localized by the user's browser. https://www.npmjs.com/package/reactstrap-date-picker#dateformat

[mattbesedick]

Ah okay, that makes sense. I know that you're able to reconstruct the format in this specific example.. but what if you have a state object that has multiple keys that need to be updated?

In your example, you're only passing (v) back to handleChange. What if I needed to update multiple keys..is that a possibility?

[johnrom]

Yes, you could set the field value to be an object like { v, f }, if your value was an actual complex object. Or you could have nested fields managed by a single field, like name.first and name.last and setFieldValue to { first, last }. Just have to make sure initialValues matches that shape.

[mattbesedick]

Great, thanks for the input.

Also another issue I ran into -- when touching one field with a different name and id, it actually thinks both fields are being touched. Is there something i'm doing wrong?

https://codesandbox.io/s/little-resonance-cc8lz?file=/src/App.js

[johnrom]

I don't know why DatePicker is triggering blur for both fields on every click, but Formik itself is just taking the blur for each field and registering it as expected. I've made a ton of fixes here related to use of object instead of a single value for source of truth. I recommend using a single value instead and avoiding all of these issues.

https://codesandbox.io/s/flamboyant-shannon-o0hle?file=/src/App.js

(also just logged blur event so you can see it's occuring on both fields on every click)