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>)
    }
}

class Form extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            contact: {
                name: '',
                tel: ''
            }
        };
    }

    handleChange = e => {
        const target = e.target;
        const name = target.name;
        const value = target.value;

        this.setState({
            contact:{
                ...this.state.contact,
                [name]: value
            }
        },()=>{console.log(this.state.contact.name+"  "+this.state.contact.tel);});


      }

    render() {
        return (
            <form onSubmit={() => this.props.addContact(this.state.contact)}>
                <input  value={this.state.contact.name} type="text" name="name" onChange={this.handleChange} />
                <input  value={this.state.contact.tel} type="text" name="tel" onChange={this.handleChange} />
                <button className="submit">OK</button>
            </form>
        );
    }
}


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)
    {
        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
            },
        )

    }

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

ReactDOM.render(<App />, document.getElementById('root'));