Advanced TypeScript Programming Projects

Displaying the personal details interface

We are going to create a class called PersonalDetails. This class is going to render out the core of our interface inside the render method. Again, we are using reactstrap to lay out the various parts of the interface. Before we break down the intricacies of what our render method does, let's take a look at what this all looks like:

import * as React from 'react';import Button from 'reactstrap/lib/Button';import Col from 'reactstrap/lib/Col';import Row from 'reactstrap/lib/Row';export default class PersonalDetails extends React.Component {  public render() {    return (      <Row>        <Col lg="8">          <Row>            <Col><h4 className="mb-3">Personal details</h4></Col>          </Row>          <Row> <Col><label htmlFor="firstName">First name</label></Col> ...