exercise 1.6

part1/src/App.js

@@ -1,46 +1,50 @@
 import { useState } from 'react'
 
-const Display = ({ counter }) => {
+const Stats = ({ positive, neutral, negative }) => {
 	return (
-		<div>{counter}</div>
+		<>
+			<h2> Results </h2>
+			<p> Positive:  {positive} </p>
+			<p> Neutral:  {neutral} </p>
+			<p> Negative:  {negative} </p>
+		</>
 	)
 }
 
-const Button = ({ handleClick, text }) => {
+const Button = ({ handler, text }) => {
 	return (
-		<button onClick={handleClick}>
+		<button onClick={handler}>
 			{text}
 		</button>
 	)
 }
 
 const App = () => {
-	const [counter, setCounter] = useState(0)
+	const [good, setGood] = useState(0)
-	console.log('rendering with counter value', counter)
+	const [neutral, setNeutral] = useState(0)
-	const increaseByOne = () => {
+	const [bad, setBad] = useState(0)
-		console.log('increasing, value before', counter)
+
-		setCounter(counter + 1)
+	const incPositive = () => {
+		setGood(good + 1)
 	}
 
-	const decreaseByOne = () => {
+	const incNegative = () => {
-		console.log('decreasing, value before', counter)
+		setBad(bad + 1)
-		setCounter(counter - 1)
 	}
 
-	const setToZero = () => {
+	const incNeutral = () => {
-		console.log('resetting to zero, value before', counter)
+		setNeutral(neutral + 1)
-		setCounter(0)
 	}
 
 	return (
 		<div>
-			<Display counter={counter} />
+			<h2> Feedback </h2>
-			<Button handleClick={increaseByOne} text="plus" />
+			<Button handler={incPositive} text="positive" />
-			<Button handleClick={setToZero} text="zero" />
+			<Button handler={incNeutral} text="neutral" />
-			<Button handleClick={decreaseByOne} text="minus" />
+			<Button handler={incNegative} text="negative" />
+			<Stats positive={good} negative={bad} neutral={neutral} />
 		</div>
 	)
-
 }
 
 export default App