Creating a tabbed user interface

Before we add in our navigation elements, we are going to create the components that we will link to when the user clicks on one of the links. We will start with AddAddress.tsx, which we will add code into to add an address. We start off by adding the class definition:

export class AddAddress extends React.Component<any, IAddress> {}

The default state for our component is an empty IAddress, so we add the definition for it, and set the component state to our default:

private defaultState: Readonly<IAddress>;constructor(props:any) {  super(props);  this.defaultState = {    Line1: '',    Line2: '',    Line3: '',    Line4: '',    PostalCode: '',    ServerID: '',  };  const address: IAddress = this.defaultState; this.state = address; ...

Get Advanced TypeScript Programming Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.