Do excercise 2.1 - 2.2

src/index.js

 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 = [
+const App = () => { //Älä muuta
+  const phonebook = {
+    name: 'Superadvanced phonebook app',
+    contacts: [
       {
         name: 'John Doe',
-      phonenumber: '358401234567'
+        phonenumber: '358401234567',
+        id: 1
       },
       {
         name: 'Jane Doe',
-      phonenumber: '44551234567'
+        phonenumber: '44551234567',
+        id: 2
       },
       {
         name: 'Foo bar',
-      phonenumber: '000'
+        phonenumber: '000',
+        id: 3
       }
     ]
+  }
 
   return (
     <div>
-      <Header title="kikkeli" />
-      <Contents contacts={contacts} />
+      <Phonebook phonebook={phonebook} />
     </div>
   )
 }