// React 16.4.1

import React, { Component } from "react";

class Contacts extends Component {
    // Our State, with objects
    state = {
        // arrays of objects
        contacts: [
            {
                id: 1,
                name: "John Doe",
                email: "jdoe@gmail.com"
            },
            {
                id: 2,
                name: "Karen Williams",
                email: "karen@gmail.com"
            },
            {
                id: 3,
                name: "Henry Johnson",
                email: "henry@gmail.com"
            }
        ]
    };

    deleteContact = id => {
        // extract 'contacts' from 'state'
        const { contacts } = this.state;

        // create a new copy of contacts using filter to remove desired id
        const newContacts = contacts.filter(contact => contact.id !== id);

        // Use setState() to set the new copy 'contacts' object with the removed id omitted
        this.setState({
            contacts: newContacts
        })
    };

    render() {
        // extract 'contacts' from 'state
        const { contacts } = this.state;

        // Remove this component from view via event handler
        <Contact key={contact.id} contact={contact} deleteClickHandler={this.deleteContact.bind(this.contactid)} />
    }

}