class App extends React.Component{
    constructor(props)
    {
        super(props);
        this.state={
            contacts: [
                {
                    name: 'Jan',
                    tel: '123 456 789'
                },
                {
                    name: 'Krzyś',
                    tel: '098 765 432'
                }
            ]
        }
    }

    addContact(contact)
    {
        console.log("!!" + contact.name+"   "+contact.tel);
        const tempContacts =  this.state.contacts.concat([
            {
                name: contact.name, //Czyli tu powinien rozrzerzyć tablicę o dodatkowy obiekt z nowymi wartościami
                tel: contact.tel
            }
        ])

        this.setState(
            {
                contacts: tempContacts, //I tu zastąpić starą tablicę, nową bogatszą o element
            },
            ()=>{ console.log(this.state.contacts)}
        )

    }

    render()
    {
        return(
            <div>
                <Form addContact={(contact) => this.addContact(contact)}/>
                <div>
                    <Book contacts={this.state.contacts}/>
                </div>
            </div>
        )
    }
}








class Book extends React.Component{
    render()
    {
        const contacts = this.props.contacts.map(
            (contact,id)=>{
            return(
                <li key={id}> |  {contact.name}  :  {contact.tel}</li>
                )
            });

        return(<ol>{contacts}</ol>)
    }
}