How To Solve React's "Controlled And Uncontrolled" Component Issue Enter a brief summary for this post

Solving React's Component problem with User Inputs

This problem I ran into with React and I imagine there are many others who have experienced it too whilst starting out on their React journey. Me too. The way I solved it can be better explaining the cause first.

You set initial values for a form and its input fields, using a data type of string for example. But on entering data into an input field React throws an error. Because it is seeing the field's value as undefined. To get around this use the ?? to use a default if the value hasn't been set (even though you've done so).

...

<label htmlFor="name">Name <Field autoComplete="off" value={props.values.name ?? ""} name="name" id="name" className="form-control my-2" /> <ErrorMessage name="name" />
...

I haven't ran into this problem since and I imagine you won't either now.