ex1.11 use <table> <td> <tr> elements to neatly format our output

1 files changed, 5 insertions, 3 deletions

diff --git a/part1/unicafe/src/App.js b/part1/unicafe/src/App.js
index d2ef92b..edc1e63 100644
--- a/part1/unicafe/src/App.js
+++ b/part1/unicafe/src/App.js
@@ -10,7 +10,9 @@ const Button = (props) => {
 
 const StatisticLine = (props) => {
   return (
-    <p>{props.text} {props.count}</p>
+    <tr>
+      <td>{props.text}</td><td>{props.count}</td>
+    </tr>
   )
 }
 
@@ -27,14 +29,14 @@ const Statistics = (props) => {
   const average = (good - bad) / 9.0
   const positive_percent = (good/total) * 100
   return (
-    <>
+    <table>
     <StatisticLine text="good" count={good} />
     <StatisticLine text="neutral" count={bad} />
     <StatisticLine text="bad" count={bad} />
     <StatisticLine text="all" count={total} />
     <StatisticLine text="average" count={average} />
     <StatisticLine text="positive(%)" count={positive_percent} />
-    </>
+    </table>
   )
 }