ASP.NET Core 3 and React

Tracking validation errors with state

We are going to track the validation error messages in the state as the user completes the form and fields become valid or invalid. Later on, we'll be able to render the error messages to the screen. We are going to store the validation errors in the Form component state as follows:

1. Let's start by creating interface for the errors in Form.tsx after the Values interface:

export interface Errors {  [key: string]: string[];}

This is an indexable type where an array of validation error messages is associated with a field name.

2. We are only going to render a validation error if the field has been touched and lost focus, so we need to track whether this is the case for each field. Let's create an interface ...