Null data values in Formik fields throws warnings in the console log

[DewangS]

I've started noticing in console log, multiple warnings for Formik fields where the data is null. The reason data being null is due to the fact that these fields in the database are nullable and are optional in the front-end. I've seen a few suggestions on Stackoverflow where people put ternary operator ?:"" but doing so results in user input being overwritten each time when user moves on to the next field on the form. For now the only workaround is in my API which interacts with MySQL DB. I use IFNULL() and return an empty string or 0 for null fields but I really don't like this approach. Any idea or suggestions on how to handle this?

[johnrom]

you can use null coalescing operator (with support from your build process):

<input value={yourField.str ?? ""} />
<input type="number" value={yourField.num ?? 0} />

Or you can check typeof manually for nullness instead of truthiness.

This doesn't overwrite user input. The values in Formik are only changed when the user types. And if the user types "" (deleting all text), it would not overwrite that value because it isn't nullish.

Note that the values in Formik's initialValues are required to match the shape of your data, and nothing in there can be undefined. Null is fine, but you'll have to cast at the moment you print to the input so React knows it is a Controlled Field and not an Uncontrolled Field. If you wanted to do it once, you could instead do something like:

const apiResult = fetchMyApi();

const initialValues = {
  str: apiResult.str ?? "",
  num: apiResult.num ?? "",
}

// but memoize it
return <Formik initialValues={initialValues} />

[DewangS]

Thanks @johnrom your tip fixed my issue. Also thanks for the explanation as to why React spits an error for NULL values, now it does make sense.