<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 120px;
  color: orange;
  text-align: center;
}

h3 {
  font-size: 120px;
  color: pink;
  text-align: center;
}
// App component (parent)
const App = ({}) => {
  const [counter, setCounter] = React.useState(0);
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setCounter(counter + 1);
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [counter]);
  
  
  // if `counter > 5`, display current value of `counter` enclosed between `<h1>` element
  if (counter > 5) {
    return <h1>{counter}</h1>;
  }

  return (
    <>
      {/*ternary operator*/}
      {counter === 0 ? <h2>Starting...</h2> : ""}

      {/* Logical AND (&&) operator*/}
      {counter >= 1 && counter <= 5 && <h3>{counter}</h3>}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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