<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@16/umd/react.development.js
  2. https://unpkg.com/react-dom@16/umd/react-dom.development.js