Not working example of use context...

own-react-experiments/src/App.tsx

@@ -1,7 +1,11 @@
+import { Typography } from "@mui/material";
 import TestSomeComponentsPage from "./pages/TestSomeComponentsPage";
+import UnitConverterPage from "./pages/UnitConverterPage/UnitConverterPage";
 
 function App() {
-  return <TestSomeComponentsPage />;
+  console.debug("App rerender!");
+
+  return <UnitConverterPage />;
 }
 
 export default App;

own-react-experiments/src/components/NavBarRow.tsx

@@ -0,0 +1,26 @@
+import { Button, Typography } from "@mui/material";
+import React, { SetStateAction } from "react";
+
+interface Props {
+  items: string[];
+  setter: React.Dispatch<SetStateAction<string>>;
+}
+
+function NavBarRow({ items, setter }: Props) {
+  console.debug("NavBarRow rerender!");
+
+  return (
+    <>
+      <Typography variant="body1">
+        This is the NavBarRow with {items.length} items.
+      </Typography>
+      {items.map((item) => (
+        <Button variant="outlined" key={item} onClick={() => setter(item)}>
+          {item}
+        </Button>
+      ))}
+    </>
+  );
+}
+
+export default NavBarRow;

own-react-experiments/src/pages/UnitConverterPage.tsx

@@ -1,15 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import React from "react";
-
-function UnitConverterPage() {
-  return (
-    <Box>
-      <Typography variant="h1">The miracle unit converter!</Typography>
-      <Typography variant="body1">
-        Use the controls to your advantage!
-      </Typography>
-    </Box>
-  );
-}
-
-export default UnitConverterPage;

own-react-experiments/src/pages/UnitConverterPage/TimeConverter.tsx

@@ -0,0 +1,62 @@
+import { TextField, Typography } from "@mui/material";
+import React, { ReactNode, SetStateAction, useContext, useState } from "react";
+
+interface TimeConverterMembers {
+  firstNumber: string;
+  secondNumber: string;
+}
+
+const TimeConverterContext = React.createContext<TimeConverterMembers>(
+  {} as TimeConverterMembers
+);
+
+const TimeConverterContextUpdate = React.createContext<
+  React.Dispatch<SetStateAction<TimeConverterMembers>>
+>({} as React.Dispatch<SetStateAction<TimeConverterMembers>>);
+
+interface Props {
+  children: ReactNode;
+}
+
+export function TimeConverterStateProvider({ children }: Props) {
+  const [currentMembers, setCurrentMembers] = useState<TimeConverterMembers>({
+    firstNumber: "7",
+    secondNumber: "8",
+  });
+  return (
+    <TimeConverterContext.Provider value={currentMembers}>
+      <TimeConverterContextUpdate.Provider value={setCurrentMembers}>
+        {children}
+      </TimeConverterContextUpdate.Provider>
+    </TimeConverterContext.Provider>
+  );
+}
+
+function TimeConverter() {
+  const members = useContext(TimeConverterContext);
+  const setMembers = useContext(TimeConverterContextUpdate);
+  console.debug("TimeConverter rerender! Members: " + members.firstNumber);
+
+  return (
+    <>
+      <Typography variant="h3">Time converter!</Typography>
+      <TextField
+        id="firstNumber"
+        variant="outlined"
+        defaultValue={members.firstNumber}
+        onChange={(e) => {
+          setMembers({ ...members, firstNumber: e.target.value });
+          console.debug(members);
+        }}
+      />
+      <TextField
+        id="secondNumber"
+        variant="outlined"
+        value={members.firstNumber}
+      />
+      <TextField id="nah" />
+    </>
+  );
+}
+
+export default TimeConverter;

own-react-experiments/src/pages/UnitConverterPage/UnitConverterPage.tsx

@@ -0,0 +1,42 @@
+import { Box, Typography } from "@mui/material";
+import React, { useState } from "react";
+import WeightConverter from "./WeightConverter";
+import TimeConverter, { TimeConverterStateProvider } from "./TimeConverter";
+import NavBarRow from "../../components/NavBarRow";
+
+function UnitConverterPage() {
+  const [currentPage, setCurrentPage] = useState("default_site");
+  const availablePages = ["Time Converter", "Weight Converter"];
+  let subPage = <Typography>Pick a converter</Typography>;
+
+  switch (currentPage) {
+    case "Time Converter":
+      subPage = (
+        <>
+          <TimeConverterStateProvider>
+            <TimeConverter />
+          </TimeConverterStateProvider>
+        </>
+      );
+      break;
+    case "Weight Converter":
+      subPage = <WeightConverter />;
+      break;
+  }
+
+  console.debug("UnitConverterPage rerender!");
+
+  return (
+    <Box maxWidth={455} margin={15}>
+      <Typography variant="h4">The miracle unit converter!</Typography>
+      <Typography variant="body1">
+        Use the controls to your advantage!
+      </Typography>
+      <NavBarRow items={availablePages} setter={setCurrentPage} />
+      {<Box fontWeight="bold">{currentPage}</Box>}
+      {subPage}
+    </Box>
+  );
+}
+
+export default UnitConverterPage;

own-react-experiments/src/pages/UnitConverterPage/WeightConverter.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+function WeightConverter() {
+  console.debug("WeightConverter rerender!");
+
+  return <div>WeightConverter</div>;
+}
+
+export default WeightConverter;