exercise 1.10
This commit is contained in:
parent
d301767634
commit
a62d2f712a
|
@ -1,9 +1,16 @@
|
|||
import { useState } from 'react'
|
||||
|
||||
const Stats = ({ positive, neutral, negative }) => {
|
||||
const total = positive - negative
|
||||
const votes = positive + neutral + negative
|
||||
if (votes == 0) {
|
||||
const StatisticLine = ({ value, text }) => {
|
||||
return (
|
||||
<tr>
|
||||
<td>{text}</td>
|
||||
<td>{value}</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
const Stats = ({ positive, neutral, negative, total, votes }) => {
|
||||
if (votes === 0) {
|
||||
return (
|
||||
<>
|
||||
<p> No Votes Cast Yet </p>
|
||||
|
@ -13,12 +20,12 @@ const Stats = ({ positive, neutral, negative }) => {
|
|||
return (
|
||||
<>
|
||||
<h2> Results </h2>
|
||||
<p> Positive: {positive} </p>
|
||||
<p> Neutral: {neutral} </p>
|
||||
<p> Negative: {negative} </p>
|
||||
<p> All: {votes} </p>
|
||||
<p> Average: {total / votes} </p>
|
||||
<p> Positive: {positive / votes} </p>
|
||||
<StatisticLine text="Positive" value={positive} />
|
||||
<StatisticLine text="Neutral" value={neutral} />
|
||||
<StatisticLine text="Negative" value={negative} />
|
||||
<StatisticLine text="All" value={votes} />
|
||||
<StatisticLine text="Average" value={total / votes} />
|
||||
<StatisticLine text="Positive" value={positive / votes} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -35,6 +42,8 @@ const App = () => {
|
|||
const [good, setGood] = useState(0)
|
||||
const [neutral, setNeutral] = useState(0)
|
||||
const [bad, setBad] = useState(0)
|
||||
const total = good - bad
|
||||
const votes = good + neutral + bad
|
||||
|
||||
const incPositive = () => {
|
||||
setGood(good + 1)
|
||||
|
@ -54,7 +63,7 @@ const App = () => {
|
|||
<Button handler={incPositive} text="positive" />
|
||||
<Button handler={incNeutral} text="neutral" />
|
||||
<Button handler={incNegative} text="negative" />
|
||||
<Stats positive={good} negative={bad} neutral={neutral} />
|
||||
<Stats positive={good} negative={bad} neutral={neutral} total={total} votes={votes} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue