useEffect

react-hooks/home/src/App.js

@@ -1,10 +1,13 @@
 import { useState } from 'react';
+import Joke from './Joke';
 
 function App() {
   const [userQuery, setUserQuery] = useState('');
 
-  const searchQuery = () => {
-    window.open(`https://google.com/search?q=${userQuery}`, '_blank');
+  const updateUserQuery = event => {
+    console.log('userQuery', userQuery);
+
+    setUserQuery(event.target.value);
   }
 
   const handleKeyPress = event => {
@@ -13,10 +16,8 @@ function App() {
     }
   }
 
-  const updateUserQuery = event => {
-    console.log('userQuery', userQuery);
-
-    setUserQuery(event.target.value);
+  const searchQuery = () => {
+    window.open(`https://google.com/search?q=${userQuery}`, '_blank');
   }
 
   return ( 
@@ -30,6 +31,8 @@ function App() {
         />
         <button onClick={searchQuery}>Search</button>
       </div>
+      <hr />
+      <Joke />
     </div>
   );
 }

react-hooks/home/src/Joke.js

@@ -0,0 +1,27 @@
+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);
+      });
+  }, []);
+
+  const { setup, punchline } = joke;
+
+  return (
+    <div>
+      <h3>Joke of the session</h3>
+      <p>{setup}</p>
+      <p><em>{punchline}</em></p>
+    </div>
+  );
+}
+
+export default Joke;