osa2

osa1/part1/src/App.js

-import { useState } from 'react'
-
-const Statistics = (props) => {
-  if (props.Gll.length === 0) {
-    return (
-    <div>
-      No feedback given
-    </div>
-    )
-  }
-  return (
-    <div>
-      <StatisticLine text="good" value ={props.g} />
-      <StatisticLine text="neutral" value ={props.n} />
-      <StatisticLine text="bad" value ={props.b} />
-      <StatisticLine text="all" value ={props.g + props.b + props.n} />
-      <StatisticLine text="average" value =
-      {((props.g*1) + (props.b * -1) + (props.n* 0)) / (props.g+props.b+props.n)} />
-      <StatisticLine text="positive" value ={((props.g)/(props.g+props.b+ props.n)) * 100 } mark ={"%"}  /> 
-    </div>
-  )
-}
-const Button = ({handleClick, text}) => { 
-  return (
-  <button onClick={handleClick}> 
-  {text}  
-  </button>
-  )
-}
-const StatisticLine = (props) => { 
-  return (
-    <div>
-      {props.text} {props.value} {props.mark}
-    </div>
-  )
-}
-
-
-const App = () => {
-  // save clicks of each button to its own state
-  const [good, setGood] = useState(0)
-  const [neutral, setNeutral] = useState(0)
-  const [bad, setBad] = useState(0)
-  const [all, setAll] = useState([])
-  
-
-  const setBadClick = () => {
-    setBad(bad + 1)
-    setAll(all.concat(''))
-  }
-  const setNeutralClick = () => {
-    setNeutral(neutral + 1)
-    setAll(all.concat(''))
-  }
-  const setGoodClick = () => {
-    setGood(good + 1)
-    setAll(all.concat(''))
-  }
-  const statistics = () => {
-
-  }
- 
+import Note from "./components/Note"
 
+const App = ({notes}) => {
 
   return (
     <div>
-    <h1>
-      give feedback
-    </h1>
-    <Button handleClick={setGoodClick} text='good' ></Button>
-    <Button handleClick={setNeutralClick} text='neutral' ></Button>
-    <Button handleClick={setBadClick} text='bad' ></Button>
-    <h1>
-      statistics
-      
-    </h1>
-      <Statistics Gll={all} g = {good} b = {bad} n = {neutral} />
+      <h1>Notes</h1>
+      <ul>
+        {notes.map(note => 
+          <Note key={note.id} note={note}
+          />
+        )}
+      </ul>
     </div>
   )
 }

osa1/part1/src/components/Note.js

+const Note = ({ note }) => {
+    return (
+      <li>{note.content}</li>
+    )
+  }
+  
+  export default Note
\ No newline at end of file

osa1/part1/src/index.js

@@ -3,4 +3,29 @@ import ReactDOM from 'react-dom/client'
 
 import App from './App'
 
-ReactDOM.createRoot(document.getElementById('root')).render(<App />)
\ No newline at end of file
+const notes = [
+  {
+    id: 1,
+    content: 'HTML is easy',
+    date: '2019-05-30T17:30:31.098Z',
+    important: true
+  },
+  {
+    id: 2,
+    content: 'Browser can execute only JavaScript',
+    date: '2019-05-30T18:39:34.091Z',
+    important: false
+  },
+  {
+    id: 3,
+    content: 'GET and POST are the most important methods of HTTP protocol',
+    date: '2019-05-30T19:20:14.298Z',
+    important: true
+  }
+]
+const result = notes.map(note => note.id)
+console.log(result)
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App notes={notes} />
+)
\ No newline at end of file