Skip to content

Instantly share code, notes, and snippets.

@vsakaria

vsakaria/Address.tsx

Last active Sep 5, 2019
Embed
What would you like to do?
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>
</>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.