Learn React with TypeScript 3

Chapter 7: Working with Forms

1. Extend our generic Field component to include a number editor using the native number input.

• Firstly, add "Number" to the type prop:

interface IFieldProps {  ...  type?: "Text" | "Email" | "Select" | "TextArea" | "Number";}

• Include the "Number" type when rendering the input:

{(type === "Text" || type === "Email" || type === "Number") && (  <input    type={type.toLowerCase()}    id={name}    value={context.values[name]}    onChange={e => handleChange(e, context)}    onBlur={e => handleBlur(e, context)}  />)}

2. Implement an urgency field on the Contact Us form to indicate how urgent a response is. The field should be numeric.

Add the following field immediately after the notes field:

<Form.Field name="urgency" label="How urgent ...