From f5520ef30179b2dab7eb4c0b7d13b4affd18d796 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mertta=20H=C3=A4tinen?= <mvhati@utu.fi>
Date: Fri, 19 Mar 2021 13:18:57 +0200
Subject: [PATCH] Do excercise 2.1 - 2.2
---
src/index.js | 58 +++++++++++++++++++++++++++++++++-------------------
1 file changed, 37 insertions(+), 21 deletions(-)
diff --git a/src/index.js b/src/index.js
index d901a32..4070c08 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>
)
}
--
GitLab