Learn React with TypeScript 3

Rendering validation error messages

In this section, we are going to render the validation error messages in the Field component:

1. Let's display all errors in a span with the form-error CSS class we have already implemented. We display these at the bottom of the div container of the form-group:

<div className="form-group">  <label htmlFor={name}>{label}</label>  {(type === "Text" || type === "Email") && (    ...  )}  {type === "TextArea" && (    ...  )}  {type === "Select" && (    ...  )}  {context.errors[name] &&    context.errors[name].length > 0 &&    context.errors[name].map(error => (      <span key={error} className="form-error">        {error}      </span>    ))}</div>

So, we first check that we have errors for the field name, and then use the map function in the errors array ...