Address.tsx

import * as React from 'react';

interface IAddressDetails {
    address1: string;
    address2: string;
    address3: string;
    city: string;
    postcode: string;
    country: string;
    id: number;
}
    
interface IAddressProps {
    address:IAddressDetails;
}

const AddressDetails: React.FC<IAddressProps> = ({ address }: IAddressProps) => {

    const { address1, address2, address3, city, postcode, country } = address; 

    return (
        <>
            <section>Address</section>
            <section className={address1}>Address line 1</section>
            <section>{address1}</section>
            <section>Address line 2</section>
            <section>{address2}</section>
            <section>Address line 3</section>
            <section>{address3 && address3}</section>
            <section>City</section>
            <section>{city}</section>
            <section>Postcode</section>
            <section>{postcode}</section>
            <section>Number</section>
            <section>{country}</section>
        </>
    )
}

interface IAddressListProps {
    addressList: Array<IAddressDetails>
}

const AddressList: React.FC<IAddressListProps> = ({ addressList }) => {
    return (
        <>
            {
                addressList.map((address) => {
                    return <AddressDetails key={address.id} address={address} />
                })
            }
        </>
    )
}

const App: React.FC = () => {

    const address = { address1: 'Some', 
                        address2: 'address', 
                        address3: 'here', 
                        city: 'London', 
                        postcode: 'NW6 8UY', 
                        country: 'London' }

    const addressList = [address, address, address, address];

    return (
        <>
            <section>
                <h1>One Address</h1>
                <AddressDetails address={address} />
            </section>

            <section>
                <h1>A List of Addresses</h1>
                <AddressList addressList={addressList} />
            </section>
        </>
    )
}