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...