<div id="root" />
#root{
text-align: center;
button {
height: 30px;
width: 80px;
}
}
View Compiled
function CounterButton(props) {
// Define state using hooks
const [count, setCount] = React.useState(0);
const [show, setShow] = React.useState(true);
// Return button displaying current state and incrementing state on click
if (!show) {
return null;
}
return (
<button onClick={
() => {
if (count === 5) {
setShow(false);
}
setCount(count + 1);
}
}>
{count}
</button>
)
}
ReactDOM.render(<CounterButton /*key={new Date().getTime()}*/ />, document.getElementById("root"));
setInterval(() => {
ReactDOM.render(<CounterButton /*key={new Date().getTime()}*/ />, document.getElementById("root"));
}, 2000);
View Compiled
This Pen doesn't use any external CSS resources.