feat: add solution for context api challenge

kaylakremer · kaylakremer · commit 64928bd95c11 · 2023-01-08T05:25:26.000-05:00
diff --git a/solutions/context-api.js b/solutions/context-api.js
@@ -0,0 +1,40 @@
+import React, { useState, createContext, useContext } from "react"
+import ReactDOM from "react-dom"
+
+const languages = ["JavaScript", "Python"]
+const LanguageContext = createContext({
+    languages,
+    language: languages[0],
+    setLanguage: () => {},
+})
+
+function App() {
+    const [language, setLanguage] = useState(languages[0])
+    return (
+        <LanguageContext.Provider value={{ languages, language, setLanguage }}>
+            <MainSection />
+        </LanguageContext.Provider>
+    )
+}
+
+function MainSection() {
+    const { languages, language, setLanguage } = useContext(LanguageContext)
+    const currentIndex = languages.indexOf(language)
+    const toggleLanguage = () => {
+        if (currentIndex === languages.length - 1) {
+            setLanguage(languages[0])
+        } else {
+            setLanguage(languages[currentIndex + 1])
+        }
+    }
+    return (
+        <div>
+            <p id="favoriteLanguage">{`Favorite programing language: ${language}`}</p>
+            <button id="changeFavorite" onClick={toggleLanguage}>
+                Toggle language
+            </button>
+        </div>
+    )
+}
+
+ReactDOM.render(<App />, document.getElementById("root"))
