blob: b583060f2cccea329bb36ffc4c1cb0b46c952e18 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
import { useState } from 'react'
const Button = (props) => {
return (
<button onClick={props.onclick}>
{props.text}
</button>
)
}
const Display = (props) => {
return (
<p>{props.text} {props.count}</p>
)
}
const Statistics = (props) => {
const good = props.good
const bad = props.bad
const neutral = props.neutral
if (good === 0 && bad === 0 && neutral === 0) {
return <p>No feedback given</p>
}
const total = good + neutral + bad
const average = (good - bad) / 9.0
const positive_percent = (good/total) * 100
return (
<>
<Display text="good" count={good} />
<Display text="neutral" count={bad} />
<Display text="bad" count={bad} />
<Display text="all" count={total} />
<Display text="average" count={average} />
<Display text="positive(%)" count={positive_percent} />
</>
)
}
const App = () => {
// save clicks of each button to its own state
const [good, setGood] = useState(0)
const [neutral, setNeutral] = useState(0)
const [bad, setBad] = useState(0)
return (
<div>
<h1>give feedback</h1>
<Button onclick={() => setGood(good + 1)} text="good" />
<Button onclick={() => setNeutral(neutral + 1)} text="neutral" />
<Button onclick={() => setBad(bad + 1)} text="bad" />
<h2>statistics</h2>
<Statistics good={good} neutral={neutral} bad={bad} />
</div>
)
}
export default App
|
