Complete section: Introduction to Web Development, React, and React Hooks

Author: 15Dkatz

frontend/src/App.js

@@ -1,8 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Joke from './Joke';
 
 function App() {
+  const [userQuery, setUserQuery] = useState('');
+
+  const updateUserQuery = event => {
+    console.log('userQuery', userQuery);
+    setUserQuery(event.target.value); 
+  }
+
+  const searchQuery = () => {
+    window.open(`https://google.com/search?q=${userQuery}`);
+  }
+
+  const handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      searchQuery();
+    } 
+  }
+
   return (
-    <div className="App">App</div>
+    <div>
+      <input value={userQuery} onChange={updateUserQuery} onKeyPress={handleKeyPress} />
+      <button onClick={searchQuery}>Search</button>
+      <div>{userQuery}</div>
+      <hr />
+      <Joke />
+    </div>
   );
 }
 

frontend/src/Joke.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+
+function Joke() {
+  const [joke, setJoke] = useState({});
+ 
+  useEffect(() => {
+    fetch('https://official-joke-api.appspot.com/jokes/random')
+      .then(response => response.json())
+      .then(json => {
+        console.log('joke json', json)
+        setJoke(json)
+      }); 
+  }, []);
+
+  return (
+    <div>
+      <h3>Joke</h3>
+      <p>{setup}</p>
+      <p><em>{punchline}</em></p>
+    </div>
+  ) 
+}
+
+export default Joke;