diff --git a/src/index.js b/src/index.js index d901a3270359a9b56f433f17b1255ed06c8454da..4070c0863fc1c62c9bb559607ffcac14284d2a30 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,26 @@ import React from 'react' import ReactDOM from 'react-dom' +const Phonebook = (props) => { + return ( + <div> + <Header title={props.phonebook.name}/> + <Contents contacts={props.phonebook.contacts}/> + <NumberOfEntries number={props.phonebook.contacts.length} /> + </div> + ) +} + +const NumberOfEntries = (props) => <p>Total number of entries {props.number}</p> + const Header = (props) => <h1>{props.title}</h1> const Contents = (props) => { return ( <div> - <Entry contact={props.contacts[0]}/> - <Entry contact={props.contacts[1]}/> - <Entry contact={props.contacts[2]}/> + {props.contacts.map(contact => ( + <Entry contact={contact} key={contact.id}/> + ))} </div> ) } @@ -21,27 +33,31 @@ const Entry = (props) => { ) } -const App = () => { - const title = 'Superadvanced web phonebook app' - const contacts = [ - { - name: 'John Doe', - phonenumber: '358401234567' - }, - { - name: 'Jane Doe', - phonenumber: '44551234567' - }, - { - name: 'Foo bar', - phonenumber: '000' - } - ] +const App = () => { //Älä muuta + const phonebook = { + name: 'Superadvanced phonebook app', + contacts: [ + { + name: 'John Doe', + phonenumber: '358401234567', + id: 1 + }, + { + name: 'Jane Doe', + phonenumber: '44551234567', + id: 2 + }, + { + name: 'Foo bar', + phonenumber: '000', + id: 3 + } + ] + } return ( <div> - <Header title="kikkeli" /> - <Contents contacts={contacts} /> + <Phonebook phonebook={phonebook} /> </div> ) }