ternary to show either 'view workorders' or 'create new workorder'

src/components/root/Workorder.js

@@ -1,4 +1,4 @@
-import React, { useContext, Fragment } from "react";
+import React, { useContext, Fragment, useState } from "react";
 import { UserContext } from "../../backend/authorization/UserContext";
 import { ImpersonatorContext } from "../../backend/authorization/ImpersonatorContext";
 import WorkorderDisplay from "./WorkorderDisplay";
@@ -7,13 +7,31 @@ import WorkorderCreate from "../admin/WorkorderCreate";
 const Workorder = () => {
   const [currentProfile] = useContext(UserContext);
   const [admin] = useContext(ImpersonatorContext);
+  const [workView, setWorkView] = useState("display");
+
+  function workorderClick() {
+    if (workView === "display") {
+      setWorkView("create");
+    } else {
+      setWorkView("display");
+    }
+  }
 
   let content;
   if (!admin) {
     content = (
       <Fragment>
-        <WorkorderDisplay currentProfile={currentProfile} />
-        <WorkorderCreate currentProfile={currentProfile} />
+        {workView === "display" ? (
+          <Fragment>
+            <button onClick={workorderClick}>Create new Workorder</button>
+            <WorkorderDisplay currentProfile={currentProfile} />
+          </Fragment>
+        ) : (
+          <Fragment>
+            <button onClick={workorderClick}>View Workorders</button>
+            <WorkorderCreate currentProfile={currentProfile} />
+          </Fragment>
+        )}
       </Fragment>
     );
   } else {

src/components/root/WorkorderDisplay.js

@@ -12,7 +12,7 @@ import Paper from "@material-ui/core/Paper";
 
 const useStyles = makeStyles({
   table: {
-    minWidth: 650,
+    minWidth: 350,
   },
 });