Display Question

Author: pktcodes

src/App.js

@@ -15,7 +15,34 @@ function App() {
     return <Loading></Loading>;
   }
 
-  return <main>quiz</main>;
+  const { correct_answer, incorrect_answers, question } = questions[index];
+  const answers = [...incorrect_answers, correct_answer];
+
+  return (
+    <main>
+      {/* <Modal></Modal> */}
+      <section className="quiz">
+        <p className="correct-answers">
+          correct answers : {correct}/{index}
+        </p>
+        <article className="container">
+          <h2 dangerouslySetInnerHTML={{ __html: question }}></h2>
+          <div className="btn-container">
+            {answers.map((answer, index) => {
+              return (
+                <button
+                  key={index}
+                  className="answer-btn"
+                  dangerouslySetInnerHTML={{ __html: answer }}
+                ></button>
+              );
+            })}
+          </div>
+        </article>
+        <button className="next-question">next question</button>
+      </section>
+    </main>
+  );
 }
 
 export default App;