From 892ec279307f3ae4694996df16646050bbb457cf Mon Sep 17 00:00:00 2001
From: AllenL8921 <allenliu0476@gmail.com>
Date: Sun, 15 Sep 2024 00:06:00 -0400
Subject: [PATCH] Solution

---
 package-lock.json |  4 ++--
 src/App.jsx       | 23 ++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 254efeb..bd79634 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lab-react-trivia-solution",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lab-react-trivia-solution",
-      "version": "0.0.0",
+      "version": "0.2.0",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
diff --git a/src/App.jsx b/src/App.jsx
index b7bde75..2e09784 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -37,11 +37,32 @@ function App() {
     );
   }
 
+  async function fetchData(){
+    try{
+      const response = await fetch('https://opentdb.com/api.php?amount=1&category=9&type=multiple');
+
+      const questionData = await response.json();
+      setQuestionData(questionData.results[0]);
+      setSelectedAnswer(null);
+
+    }catch(error){
+      console.error(error);
+    }
+  }
+
+  const nextQuestion = (e) =>{
+    
+    fetchData();
+
+    console.log('logging question data');
+    console.log(questionData);
+  }
+
   return (
     <div className="w-100 my-5 d-flex justify-content-center align-items-center">
       <div style={{ maxWidth: "45%" }}>
         <h1 className="text-center">Trivia App</h1>
-        <button className="btn btn-success">Next Question</button>
+        <button className="btn btn-success" onClick={nextQuestion}>Next Question</button>
         {card}
       </div>
     </div>