Upload 1.10

part1/unicafe/src/App.js

@@ -1,22 +1,40 @@
 import { useState } from "react";
+const Button = (props) => {
+  return <button onClick={props.handleClick}>{props.text}</button>;
+};
+const StatisticsLine = ({ text, value }) => {
+  return (
+    <p>
+      {" "}
+      {text} {value}{" "}
+    </p>
+  );
+};
 const Statistics = (props) => {
   if (props.good + props.neutral + props.bad === 0) {
     return <p>No feedback given</p>;
   } else {
     return (
       <div>
-        <p>good {props.good}</p>
-        <p>neutral {props.neutral}</p>
-        <p>bad {props.bad}</p>
-        <p> all {props.good + props.neutral + props.bad}</p>
-        <p>
-          average{" "}
-          {(props.good - props.bad) / (props.good + props.neutral + props.bad)}
-        </p>
-        <p>
-          positive{" "}
-          {(props.good / (props.good + props.neutral + props.bad)) * 100} %
-        </p>
+        <StatisticsLine text="good" value={props.good} />
+        <StatisticsLine text="neutral" value={props.neutral} />
+        <StatisticsLine text="bad" value={props.bad} />
+        <StatisticsLine
+          text="all"
+          value={props.good + props.neutral + props.bad}
+        />
+        <StatisticsLine
+          text="average"
+          value={
+            (props.good - props.bad) / (props.good + props.neutral + props.bad)
+          }
+        />
+        <StatisticsLine
+          text="positive"
+          value={
+            (props.good / (props.good + props.neutral + props.bad)) * 100 + "%"
+          }
+        />
       </div>
     );
   }
@@ -31,9 +49,9 @@ const App = () => {
     <div>
       <h1>give feedback</h1>
 
-      <button onClick={() => setGood(good + 1)}>good</button>
-      <button onClick={() => setNeutral(neutral + 1)}>neutral</button>
-      <button onClick={() => setBad(bad + 1)}>bad</button>
+      <Button handleClick={() => setGood(good + 1)} text="good" />
+      <Button handleClick={() => setNeutral(neutral + 1)} text="neutral" />
+      <Button handleClick={() => setBad(bad + 1)} text="bad" />
 
       <h1>statistics</h1>