Use Fetch To Display And Update API.

src/components/App.js

@@ -1,17 +1,49 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import AdminNavBar from "./AdminNavBar";
 import QuestionForm from "./QuestionForm";
 import QuestionList from "./QuestionList";
 
 function App() {
   const [page, setPage] = useState("List");
+  const [questions, setQuestions] = useState([]);
+
+  useEffect(() => {
+    fetch("http://localhost:4000/questions")
+      .then((response) => response.json())
+      .then((questionsData) => setQuestions(questionsData));
+  }, []);
+
+  function handleAddQuestion(newQuestion) {
+    setQuestions([...questions, newQuestion]);
+  }
+
+  function handleDeleteQuestion(id) {
+    const updatedQuestions = questions.filter((questions) => questions.id !== id)
+    setQuestions(updatedQuestions)
+  }
+
+  function handleAnswerChange(updatedQuestion) {
+    const updateQuestions = questions.map((question) => {
+     return question.id === updatedQuestion.id ? updatedQuestion : question
+    })
+    setQuestions(updateQuestions)
+  }
 
   return (
     <main>
       <AdminNavBar onChangePage={setPage} />
-      {page === "Form" ? <QuestionForm /> : <QuestionList />}
+      {page === "Form" ? (
+        <QuestionForm onAddQuestions={handleAddQuestion} />
+      ) : (
+        <QuestionList
+          questions={questions}
+          onDeleteQuestion={handleDeleteQuestion}
+          onUpdateAnswer={handleAnswerChange}
+        />
+      )}
     </main>
   );
 }
 
 export default App;
+

src/components/QuestionForm.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-function QuestionForm(props) {
+function QuestionForm({ onAddQuestions }) {
   const [formData, setFormData] = useState({
     prompt: "",
     answer1: "",
@@ -10,6 +10,7 @@ function QuestionForm(props) {
     correctIndex: 0,
   });
 
+
   function handleChange(event) {
     setFormData({
       ...formData,
@@ -19,7 +20,24 @@ function QuestionForm(props) {
 
   function handleSubmit(event) {
     event.preventDefault();
-    console.log(formData);
+    fetch("http://localhost:4000/questions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        prompt: formData.prompt,
+        answers: [
+          formData.answer1,
+          formData.answer2,
+          formData.answer3,
+          formData.answer4
+        ],
+        correctIndex: formData.correctIndex
+      })
+    })
+      .then((response) => response.json())
+      .then((newQuestionData) => onAddQuestions(newQuestionData))
   }
 
   return (

src/components/QuestionItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function QuestionItem({ question }) {
+function QuestionItem({ question, onDeleteQuestion, onUpdateAnswer }) {
   const { id, prompt, answers, correctIndex } = question;
 
   const options = answers.map((answer, index) => (
@@ -9,15 +9,36 @@ function QuestionItem({ question }) {
     </option>
   ));
 
+  function handleDelete() {
+    fetch(`http://localhost:4000/questions/${id}`, {
+      method: "DELETE",
+    })
+      .then(() => onDeleteQuestion(id))
+      .catch((error) => console.error("Error:", error));
+  }
+
+  function handleAnswerChange(event) {
+    const newCorrectIndex = (event.target.value)
+    fetch(`http://localhost:4000/questions/${id}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({correctIndex: newCorrectIndex})
+    })
+      .then((response) => response.json())
+      .then((newAnswerData) => onUpdateAnswer(newAnswerData))
+  }
+
   return (
     <li>
       <h4>Question {id}</h4>
       <h5>Prompt: {prompt}</h5>
       <label>
         Correct Answer:
-        <select defaultValue={correctIndex}>{options}</select>
+        <select defaultValue={correctIndex} onChange={handleAnswerChange}>{options}</select>
       </label>
-      <button>Delete Question</button>
+      <button onClick={handleDelete}>Delete Question</button>
     </li>
   );
 }

src/components/QuestionList.js

@@ -1,10 +1,22 @@
 import React from "react";
+import QuestionItem from "./QuestionItem"
+
+function QuestionList({ questions, onDeleteQuestion, onUpdateAnswer }) {
+  const questionItems = questions.map((question) => {
+    return (
+      <QuestionItem
+        key={question.id}
+        question={question}
+        onDeleteQuestion={onDeleteQuestion}
+        onUpdateAnswer={onUpdateAnswer}
+      />
+    )
+  })
 
-function QuestionList() {
   return (
     <section>
       <h1>Quiz Questions</h1>
-      <ul>{/* display QuestionItem components here after fetching */}</ul>
+      <ul>{questionItems}</ul>
     </section>
   );
 }