Advanced TypeScript Programming Projects

Using a select control to select an address when adding a person

When the user wants to add a person, they only need to type in their first and last name. We display a selection box to the user, which is populated with the list of previously entered addresses. Let's see how we handle a more complicated scenario like this with React.

The first thing we need to do is create two separate components. We have an AddPerson component to type the first name and last name in, and we have an AddressChoice component, which retrieves and displays the complete list of addresses for the user to select from. We will start with the AddressChoice component.

This component uses a custom IAddressProperty, which provides us with access back to the parent component ...