Make functional: Header

1 files changed, 29 insertions, 31 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index 1e5a1a0..f6a6952 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,38 +3,36 @@ import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import Button from "@mui/material/Button";
 
-class Header extends React.Component {
-    static propTypes = {
-        clearToken: PropTypes.func.isRequired
-    };
-
-    render() {
-        return (
-            <div id="header">
-                <div id="title">
-                    <Link to="/">✨ SOC Dashboard</Link>
-                </div>
-                <div id="navigation">
-                    <Link to="/" className="active">
-                        Example Navigation
-                    </Link>
-                    <span id="separator">•</span>
-                    <Link to="/">Example Navigation</Link>
-                    <span id="separator">•</span>
-                    <Link to="/">Example Navigation</Link>
-                </div>
-                <div id="right">
-                    <Button
-                        variant="contained"
-                        color="error"
-                        onClick={this.props.clearToken}
-                    >
-                        Sign out
-                    </Button>
-                </div>
+function Header(props) {
+    return (
+        <div id="header">
+            <div id="title">
+                <Link to="/">✨ SOC Dashboard</Link>
+            </div>
+            <div id="navigation">
+                <Link to="/" className="active">
+                    Example Navigation
+                </Link>
+                <span id="separator">•</span>
+                <Link to="/">Example Navigation</Link>
+                <span id="separator">•</span>
+                <Link to="/">Example Navigation</Link>
             </div>
-        );
-    }
+            <div id="right">
+                <Button
+                    variant="contained"
+                    color="error"
+                    onClick={props.clearToken}
+                >
+                    Sign out
+                </Button>
+            </div>
+        </div>
+    );
 }
 
+Header.propTypes = {
+    clearToken: PropTypes.func.isRequired
+};
+
 export default Header;