3-navbar-state

Author: tylermcginnis

app/components/Popular.jsx

@@ -1,17 +1,37 @@
 import * as React from "react";
 
 export default class Popular extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedLanguage: "All",
+    };
+
+    this.updateLanguage = this.updateLanguage.bind(this);
+  }
+  updateLanguage(selectedLanguage) {
+    this.setState({
+      selectedLanguage,
+    });
+  }
   render() {
     const languages = ["All", "JavaScript", "Ruby", "Java", "CSS", "Python"];
 
     return (
-      <select>
-        {languages.map((language) => (
-          <option key={language} value={language}>
-            {language}
-          </option>
-        ))}
-      </select>
+      <main>
+        <select
+          onChange={(e) => this.updateLanguage(e.target.value)}
+          selected={this.state.selectedLanguage}
+        >
+          {languages.map((language) => (
+            <option key={language} value={language}>
+              {language}
+            </option>
+          ))}
+        </select>
+        {JSON.stringify(this.state, null, 2)}
+      </main>
     );
   }
 }