ASP.NET Core 3 and React

Rendering validation errors

Let's render the validation errors in Field.tsx by going through the following steps:

1. In the Field component JSX, destructure the errors object from the form context:

<FormContext.Consumer>  {({ values, errors }) => (    ...  )}</FormContext.Consumer>

2. At the end of the div element, let's render the validation errors:

<div css={ ... } >  ...  {errors[name] &&    errors[name].length > 0 &&    errors[name].map(error => (      <div        key={error}        css={css`          font-size: 12px;          color: red;        `}      >        {error}      </div>    ))}</div>

We use the map function to iterate through all of the errors and render each one in a div element.

This completes the rendering of any validation error messages.