import React from "react";

/** A pure component that displays a message with the current count */
const CountDisplay = props => {
  // The count value is passed to this component as props
  const { count } = props;
  return (<div>The current count is {count}.</div>);
}

/** A component that displays a message that updates each time the button is clicked */
const Counter = () => {
  // The React useState Hook is used here to store and update the 
  // total number of times the button has been clicked.
  const [count, setCount] = React.useState(0); 
  return (
    <div className="counter">
      <CountDisplay count={count} />
      <button onClick={() => setCount(count + 1)}>Add one!</button>
    </div>
  );
};