Exercise 1.8

src/index.js

@@ -10,8 +10,7 @@ class App extends React.Component {
             bad: 0
         }
     }
-    render() {
-        const increment = (grade) => {
+    increment = (grade) => {
         switch (grade) {
             case "good":
                 return () => {this.setState({ good: this.state.good + 1 })}
@@ -21,7 +20,7 @@ class App extends React.Component {
                 return () => {this.setState({ bad: this.state.bad + 1 })}
         }
     }
-        const mean = () => {
+    mean = () => {
         if (this.state.good === 0 && this.state.neutral === 0 && this.state.bad === 0) {
             return 0
         } else {
@@ -30,32 +29,46 @@ class App extends React.Component {
             )
         }
     }
-        const positivePercentage = () => {
+    positivePercentage = () => {
         if (this.state.good === 0) {
             return 0
         } else {
             return this.state.good / (this.state.good + this.state.neutral + this.state.bad)
         }
     }
-
+    render() {
         return (
             <div>
                 <h2>anna palautetta</h2>
-                <button onClick={increment("good")}>Hyvä</button>
-                <button onClick={increment("neutral")}>Neutraali</button>
-                <button onClick={increment("bad")}>Huono</button>
+                <Button name={"Hyvä"} increment={this.increment("good")} />
+                <Button name={"Neutraali"} increment={this.increment("neutral")} />
+                <Button name={"Huono"} increment={this.increment("bad")} />
 
                 <h2>statistiikka</h2>
-                <p>Hyvä: {this.state.good}</p>
-                <p>Neutraali: {this.state.neutral}</p>
-                <p>Huono: {this.state.bad}</p>
-                <p>Keskiarvo: {mean()} </p>
-                <p>Positiivisia: {positivePercentage()}%</p>
+                <Statistics state={this.state} mean={this.mean} percentage={this.positivePercentage}/>
             </div>
         )
     }
 }
 
+const Button = ({name, increment}) => (
+    <button onClick={increment}>{name}</button>
+)
+
+const Statistic = ({name, statistic}) => (
+    <p>{name}: {statistic}</p>
+)
+
+const Statistics = ({state, mean, percentage}) => (
+   <div>
+       <Statistic name={"Hyvä"} statistic={state.good} />
+       <Statistic name={"Neutraali"} statistic={state.neutral} />
+       <Statistic name={"Huono"} statistic={state.bad} />
+       <Statistic name={"Keskiarvo"} statistic={mean()} />
+       <Statistic name={"Positiivisia"} statistic={percentage()} />
+   </div>
+)
+
 ReactDOM.render(
   <React.StrictMode>
     <App />