remember selected programming language
import clsx from "clsx";
-import React from "react";
+import React, { useEffect } from "react";
import "./styles.css";
export default function CodeSnippet({ nodeReplitLink, RustReplitLink }) {
const [lang, setLang] = React.useState("node");
+
+ useEffect(() => {
+ let langFromStorage = localStorage.getItem("lang");
+ if (!langFromStorage) {
+ setLang("node");
+ } else {
+ setLang(langFromStorage);
+ }
+ });
+
return (
<div>
<div className={clsx("langSelector")}>
@@ -12,7 +22,10 @@ export default function CodeSnippet({nodeReplitLink, RustReplitLink}) {
activeButton: lang === "node",
inactiveButton: lang !== "node",
})}
- onClick={() => setLang("node")}
+ onClick={() => {
+ localStorage.setItem("lang", "node");
+ setLang("node");
+ }}
>
Node.js
</button>
@@ -21,7 +34,10 @@ export default function CodeSnippet({nodeReplitLink, RustReplitLink}) {
activeButton: lang == "rust",
inactiveButton: lang !== "rust",
})}
- onClick={() => setLang("rust")}
+ onClick={() => {
+ localStorage.setItem("lang", "rust");
+ setLang("rust");
+ }}
>
Rust
</button>
