Separating out ApiInfo component

client/src/components/util/ApiInfo.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import useApiHealth from "../../hooks/useApiHealth";
+
+export default () => {
+  const data = useApiHealth();
+  
+  if (data === null) {
+    return <p>Connecting to back-end...</p>
+  }
+  
+  const { status, version } = data;
+  return status === "healthy"
+    ? <p>API Version: {version}</p>
+    : <p>Unable to communicate with API server! Error: {status}</p>
+}

client/src/components/util/HeaderAndFooter.jsx

@@ -1,19 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import useApiHealth from "../../hooks/useApiHealth";
-
-const ApiInfo = () => {
-  const data = useApiHealth();
-  
-  if (data === null) {
-    return <p>Connecting to back-end...</p>
-  }
-  
-  const { status, version } = data;
-  return status === "healthy"
-    ? <p>API Version: {version}</p>
-    : <p>Unable to communicate with API server! Error: {status}</p>
-}
+import ApiInfo from "./ApiInfo";
 
 const Container = styled.div`
   display: block;