From 7aa264b207c2a0a36cec549d27ce4fc0cc4e23e1 Mon Sep 17 00:00:00 2001
From: minglegao2001 <71712980+minglegao2001@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:15:14 -0400
Subject: [PATCH] Update App.jsx with API to fetch new questions

---
 src/App.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index b7bde75..92dfc1e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,6 +14,19 @@ function App() {
     setSelectedAnswer(selection);
   };
 
+  const nextQuestion = async() => {
+    try {
+      const response = await fetch("https://opentdb.com/api.php?amount=1&category=9&type=multiple");
+      const data = await response.json();
+      const newQuestion = data.results[0];
+
+      setQuestionData(newQuestion);  // Update the question data with the new question
+      setSelectedAnswer(null);       // Reset the selected answer
+    } catch (error) {
+      console.error("Failed to fetch a new question", error);
+    }
+  };
+
   let card;
 
   if (selectedAnswer) {
@@ -41,7 +54,7 @@ function App() {
     <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>