Learn React with TypeScript 3

Creating controlled inputs

In this section, we'll start to create our form containing our first controlled input:

1. Create a new file called ContactUs.tsx in the src folder containing the following code:

import * as React from "react";const ContactUs: React.SFC = () => {  return (    <form className="form" noValidate={true}>      <div className="form-group">        <label htmlFor="name">Your name</label>        <input type="text" id="name" />      </div>    </form>  );};export default ContactUs;

This is a function component that renders a form containing a label and an input for the user's name.

2. We have referenced some CSS classes, so let's add these to the bottom of index.css:

.form {  width: 300px;  margin: 0px auto 0px auto;}.form-group {  display: flex; flex-direction: ...