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