Skip to content
Snippets Groups Projects
Commit b39ec03b authored by Eemeli Lampén's avatar Eemeli Lampén
Browse files

Upload New File

parent 5d071404
Branches
No related tags found
No related merge requests found
import { useState } from 'react'
const App = () => {
const header1 = "give feedback"
const header2 = "statistics"
const [good, setGood] = useState(0)
const [neutral, setNeutral] = useState(0)
const [bad, setBad] = useState(0)
const handleGoodClick = () => {
setGood(good + 1)
}
const handleNeutralClick = () => {
setNeutral(neutral + 1)
}
const handleBadClick = () => {
setBad(bad + 1)
}
return (
<div>
<Header1 header={header1} />
<Button handleClick={handleGoodClick} text="good" />
<Button handleClick={handleNeutralClick} text="neutral" />
<Button handleClick={handleBadClick} text="bad" />
<Header2 header={header2} />
<Statistics good={good} neutral={neutral} bad={bad} />
</div>
)
}
const Header1 = (props) => {
return (
<>
<h1>{props.header}</h1>
</>
)
}
const Header2 = (props) => {
return (
<>
<h1>{props.header}</h1>
</>
)
}
const Button = ({ handleClick, text }) => {
return (
<button onClick={handleClick}>
{text}
</button>
)
}
const Statistics = ({ good, neutral, bad }) => {
const all = bad + neutral + good
const goodMinusBad = good - bad
const averageGoodMinusBad = goodMinusBad / all
const averageGood = good / all
return (
<>
<p>
good {good} <br/>
neutral {neutral} <br/>
bad {bad} <br/>
all {bad + neutral + good} <br/>
average {averageGoodMinusBad} <br/>
positive {averageGood} %
</p>
</>
)
}
export default App;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment