Replace menu with functional component

src/js/menu.tsx

@@ -3,43 +3,37 @@ import React from "react";
 
 type StreamSelectCallback = (selected: string) => void
 
-type MenuProps = {
+interface MenuProps {
     items: string[]
-    selectedItem: string | undefined
+    selectedItem: string | null
     selectCallback: StreamSelectCallback
 }
 
-export class Menu extends React.Component<MenuProps> {
-    constructor(props: MenuProps) {
-        super(props)
-    }
-
-    render() {
-        return (
-            <div id="menu">
-                <aside>
-                    <a className="menu-heading" href="#">stream.t-juice.club</a>
-                    <ul className="menu-list">
-                        {this.menuitems()}
-                    </ul>
-                </aside>
-            </div>
-        )
-    }
-
-    private menuitems() {
+export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
+    const menuitems = () => {
         return (
             <>
-                {this.props.items.map((value, idx) => {
-                    if (this.props.selectedItem == value) {
+                {items.map((value, idx) => {
+                    if (selectedItem == value) {
                         return <li key={idx} className="menu-item menu-selected"><a href={"#" + value} className="menu-link">{value}</a></li>
                     } else {
                         return <li key={idx} onClick={() => {
-                            this.props.selectCallback(value)
+                            selectCallback(value)
                         }} className="menu-item"><a href={"#" + value} className="menu-link">{value}</a></li>
                     }
                 })}
             </>
         )
     }
+    return (
+        <div id="menu">
+            <aside>
+                <a className="menu-heading" href="#">stream.t-juice.club</a>
+                <ul className="menu-list">
+                    {menuitems()}
+                </ul>
+            </aside>
+        </div>
+    )
+
 }