Skip to content

Instantly share code, notes, and snippets.

@humphd
Created Jan 28, 2021
Embed
What would you like to do?
WEB422 Week 4 - React Events
import { useState } from 'react';
import ClickCounter from './ClickCounter';
import ClickHeading from './ClickHeading';
function App() {
// State: held by the parent
const [numClicks, setNumClicks] = useState(0);
const onClickHandler = (e) => setNumClicks(numClicks + 1);
return (
<div>
<ClickHeading clicks={numClicks} />
<ClickCounter clicks={numClicks} onClick={onClickHandler} />
</div>
);
}
export default App;
function ClickCounter({ clicks, onClick }) {
return (
<button
className="click-button"
onClick={onClick}
>Clicks {clicks}</button>
);
}
export default ClickCounter;
export default function ClickHeading({ clicks }) {
if(clicks === 0) {
return null;
}
const times = clicks > 1 ? 'times' : 'time';
return (
<h1>
You've clicked { clicks } { times }
</h1>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment