michael.js

import React, { useEffect, useState } from "react";
import { Flex, Title, Button } from "../../design/components";
import { Link } from "react-router-dom";

export default function Michael(props) {
  const [greeting, setGreeting] = useState("initialValue");

  useEffect(() => {
    alert("greeting changed");
  }, [greeting]);

  return (
    <Flex
      width="100%"
      height="100vh"
      alignItems="center"
      justifyContent="center"
    >
      <div>
        <Title size={1}>hello {greeting}</Title>
        <Button
          onClick={() => {
            setGreeting("jordan");
          }}
          mb={3}
        >
          change greeting
        </Button>

        <Link to="/">
          <Button variant="outline-error">leave page</Button>
        </Link>
      </div>
    </Flex>
  );
}