ASP.NET Core 3 and React

Creating a Field component

Let's perform the following steps to create a generic Field component:

1. Create a new file called Field.tsx with the following import statements:

import { FC } from 'react';/** @jsx jsx */import { css, jsx } from '@emotion/core';import {  fontFamily,  fontSize,  gray5,  gray2,  gray6,} from './Styles';

2. Let's define the Field component Props interface:

interface Props { name: string; label?: string; type?: 'Text' | 'TextArea' | 'Password';}

So, we have props for the name field, its label, and its type.

Notice the TypeScript type for the type prop. This is a union type of string literals and means that the type prop can only be Text, TextArea, or Password.

3. The different field types are going to have lots of CSS properties ...