From febe9c4aab1d3bc460fcb4a211443ac8afdf29db Mon Sep 17 00:00:00 2001 From: Nihar Patel Date: Tue, 17 Jun 2025 15:11:11 -0400 Subject: [PATCH 1/4] Complete Fetch Request --- src/components/QuestionList.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js index 4b3701bb2..6d6394b05 100644 --- a/src/components/QuestionList.js +++ b/src/components/QuestionList.js @@ -1,10 +1,24 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import QuestionItem from "./QuestionItem"; function QuestionList() { + const [questions, setQuestions] = useState([]); + + useEffect(() => { + fetch("http://localhost:4000/questions") + .then((res) => res.json()) + .then((questions) => { + setQuestions(questions); + }); + }, []); + + const questionList = questions.map((question) => ( + + )); return (

Quiz Questions

-
    {/* display QuestionItem components here after fetching */}
+
    {QuestionList}
); } From bbb0913bdd4d89f92e74dacb7509e4432f6310d6 Mon Sep 17 00:00:00 2001 From: Nihar Patel Date: Tue, 17 Jun 2025 15:51:34 -0400 Subject: [PATCH 2/4] create new question entry --- db.json | 539 ++++++++++++++++++++++++++++++++- src/components/QuestionForm.js | 24 +- src/components/QuestionList.js | 9 +- 3 files changed, 562 insertions(+), 10 deletions(-) diff --git a/db.json b/db.json index 73ed95d1a..8f57a0385 100644 --- a/db.json +++ b/db.json @@ -3,38 +3,563 @@ { "id": 1, "prompt": "What special prop should always be included for lists of elements?", - "answers": ["id", "name", "key", "prop"], + "answers": [ + "id", + "name", + "key", + "prop" + ], "correctIndex": 2 }, { "id": 2, "prompt": "A React component is a function that returns ______.", - "answers": ["HTML", "JSX", "props", "state"], + "answers": [ + "HTML", + "JSX", + "props", + "state" + ], "correctIndex": 1 }, { "id": 3, "prompt": "Which event handler will run when a user is finished filling out a form?", - "answers": ["onSubmit", "onClick", "onChange", "onForm"], + "answers": [ + "onSubmit", + "onClick", + "onChange", + "onForm" + ], "correctIndex": 0 }, { "id": 4, "prompt": "______ is a tool that transpiles JSX into valid JavaScript.", - "answers": ["React", "Babel", "Webpack", "ES6"], + "answers": [ + "React", + "Babel", + "Webpack", + "ES6" + ], "correctIndex": 1 }, { "id": 5, "prompt": "What syntax makes it possible to unpack values from arrays, or properties from objects, into distinct variables?", - "answers": ["spread", "key-value", "coalescing", "destructuring"], + "answers": [ + "spread", + "key-value", + "coalescing", + "destructuring" + ], "correctIndex": 3 }, { "id": 6, "prompt": "Returning different elements from a component depending on the state of your application is known as _____ rendering.", - "answers": ["voodoo", "conditional", "reactive", "controlled"], + "answers": [ + "voodoo", + "conditional", + "reactive", + "controlled" + ], "correctIndex": 1 + }, + { + "prompt": "ass", + "answers": [ + "a", + "s", + "d", + "f" + ], + "correctIndex": 2, + "id": 7 + }, + { + "prompt": "121", + "answers": [ + "1", + "3", + "5", + "2" + ], + "correctIndex": 2, + "id": 8 + }, + { + "prompt": "124323", + "answers": [ + "3", + "4", + "`", + "4" + ], + "correctIndex": 2, + "id": 9 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 10 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 11 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 12 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 13 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 14 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 15 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 16 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 17 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 18 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 19 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 20 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 21 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 22 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 23 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 24 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 25 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 26 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 27 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 28 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 29 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 30 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 31 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 32 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 33 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 34 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 35 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 36 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 37 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 38 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 39 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 40 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 41 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 42 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 43 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 44 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 45 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 46 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 47 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 48 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 49 + }, + { + "prompt": "214213", + "answers": [ + "4", + "1", + "1", + "1" + ], + "correctIndex": 1, + "id": 50 + }, + { + "prompt": "12e23r", + "answers": [ + "rtw", + "wer", + "w", + "e" + ], + "correctIndex": 0, + "id": 51 } ] -} +} \ No newline at end of file diff --git a/src/components/QuestionForm.js b/src/components/QuestionForm.js index f02af04e7..357bba6f1 100644 --- a/src/components/QuestionForm.js +++ b/src/components/QuestionForm.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; -function QuestionForm(props) { +function QuestionForm({ addQuestion }) { const [formData, setFormData] = useState({ prompt: "", answer1: "", @@ -19,7 +19,27 @@ function QuestionForm(props) { function handleSubmit(event) { event.preventDefault(); - console.log(formData); + const newQuestion = { + prompt: formData.prompt, + answers: [ + formData.answer1, + formData.answer2, + formData.answer3, + formData.answer4, + ], + correctIndex: parseInt(formData.correctIndex), + }; + console.log(newQuestion); + + fetch("http://localhost:4000/questions", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(newQuestion), + }) + .then((res) => res.json()) + .then((newQuestion) => addQuestion(newQuestion)); } return ( diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js index 6d6394b05..517fa2dee 100644 --- a/src/components/QuestionList.js +++ b/src/components/QuestionList.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import QuestionItem from "./QuestionItem"; +import QuestionForm from "./QuestionForm"; function QuestionList() { const [questions, setQuestions] = useState([]); @@ -15,10 +16,16 @@ function QuestionList() { const questionList = questions.map((question) => ( )); + + const addQuestion = (newQuestion) => { + setQuestions([...questions, newQuestion]); + }; + return (

Quiz Questions

-
    {QuestionList}
+ +
    {questionList}
); } From 2d6b31b680f2d63b1dad0daaa47c84336e7c76d8 Mon Sep 17 00:00:00 2001 From: Nihar Patel Date: Tue, 17 Jun 2025 16:07:28 -0400 Subject: [PATCH 3/4] add question deletion method --- db.json | 495 --------------------------------- src/components/QuestionForm.js | 1 - src/components/QuestionItem.js | 11 +- src/components/QuestionList.js | 21 +- 4 files changed, 25 insertions(+), 503 deletions(-) diff --git a/db.json b/db.json index 8f57a0385..ad49dbeb5 100644 --- a/db.json +++ b/db.json @@ -65,501 +65,6 @@ "controlled" ], "correctIndex": 1 - }, - { - "prompt": "ass", - "answers": [ - "a", - "s", - "d", - "f" - ], - "correctIndex": 2, - "id": 7 - }, - { - "prompt": "121", - "answers": [ - "1", - "3", - "5", - "2" - ], - "correctIndex": 2, - "id": 8 - }, - { - "prompt": "124323", - "answers": [ - "3", - "4", - "`", - "4" - ], - "correctIndex": 2, - "id": 9 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 10 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 11 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 12 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 13 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 14 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 15 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 16 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 17 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 18 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 19 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 20 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 21 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 22 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 23 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 24 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 25 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 26 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 27 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 28 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 29 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 30 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 31 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 32 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 33 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 34 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 35 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 36 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 37 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 38 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 39 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 40 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 41 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 42 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 43 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 44 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 45 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 46 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 47 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 48 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 49 - }, - { - "prompt": "214213", - "answers": [ - "4", - "1", - "1", - "1" - ], - "correctIndex": 1, - "id": 50 - }, - { - "prompt": "12e23r", - "answers": [ - "rtw", - "wer", - "w", - "e" - ], - "correctIndex": 0, - "id": 51 } ] } \ No newline at end of file diff --git a/src/components/QuestionForm.js b/src/components/QuestionForm.js index 357bba6f1..f6b7cee78 100644 --- a/src/components/QuestionForm.js +++ b/src/components/QuestionForm.js @@ -29,7 +29,6 @@ function QuestionForm({ addQuestion }) { ], correctIndex: parseInt(formData.correctIndex), }; - console.log(newQuestion); fetch("http://localhost:4000/questions", { method: "POST", diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js index ab5e8e820..c947d3d1f 100644 --- a/src/components/QuestionItem.js +++ b/src/components/QuestionItem.js @@ -1,6 +1,6 @@ import React from "react"; -function QuestionItem({ question }) { +function QuestionItem({ question, deleteQuestion }) { const { id, prompt, answers, correctIndex } = question; const options = answers.map((answer, index) => ( @@ -8,6 +8,13 @@ function QuestionItem({ question }) { {answer} )); + const handleDelete = () => { + fetch(`http://localhost:4000/questions/${id}`, { + method: "DELETE", + }) + .then((res) => res.json()) + .then(() => deleteQuestion(question)); + }; return (
  • @@ -17,7 +24,7 @@ function QuestionItem({ question }) { Correct Answer: - +
    • ); } diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js index 517fa2dee..bc3ab91bb 100644 --- a/src/components/QuestionList.js +++ b/src/components/QuestionList.js @@ -13,18 +13,29 @@ function QuestionList() { }); }, []); - const questionList = questions.map((question) => ( - - )); - const addQuestion = (newQuestion) => { setQuestions([...questions, newQuestion]); }; + const deleteQuestion = (deletedQuestion) => { + const updatedQuestions = questions.filter( + (question) => question.id !== deletedQuestion.id + ); + setQuestions(updatedQuestions); + }; + + const questionList = questions.map((question) => ( + + )); + return (

    Quiz Questions

    - +
      {questionList}
    ); From 40f93ce98e32dbb379f6b597492c5484d39cc462 Mon Sep 17 00:00:00 2001 From: Nihar Patel Date: Wed, 18 Jun 2025 07:53:05 -0400 Subject: [PATCH 4/4] Add update functionality and refactor/clean code --- db.json | 4 ++-- src/components/App.js | 44 ++++++++++++++++++++++++++++++++-- src/components/QuestionForm.js | 11 ++++++++- src/components/QuestionItem.js | 22 +++++++++++++++-- src/components/QuestionList.js | 28 +++------------------- 5 files changed, 77 insertions(+), 32 deletions(-) diff --git a/db.json b/db.json index ad49dbeb5..6d964418b 100644 --- a/db.json +++ b/db.json @@ -9,7 +9,7 @@ "key", "prop" ], - "correctIndex": 2 + "correctIndex": 3 }, { "id": 2, @@ -31,7 +31,7 @@ "onChange", "onForm" ], - "correctIndex": 0 + "correctIndex": 2 }, { "id": 4, diff --git a/src/components/App.js b/src/components/App.js index 4d33c1320..0849d3fa2 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,15 +1,55 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } 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((res) => res.json()) + .then((questions) => { + setQuestions(questions); + }); + }, []); + + const addQuestion = (newQuestion) => { + setQuestions([...questions, newQuestion]); + }; + + const deleteQuestion = (deletedQuestion) => { + const updatedQuestions = questions.filter( + (question) => question.id !== deletedQuestion.id + ); + setQuestions(updatedQuestions); + }; + + const updateQuestion = (updatedQuestion) => { + const updatedQuestions = questions.map((question) => + question.id === updatedQuestion.id ? updatedQuestion : question + ); + setQuestions(updatedQuestions); + }; + + let content = page; + if (page === "Form") { + content = ; + } else { + content = ( + + ); + } return (
    - {page === "Form" ? : } + {content}
    ); } diff --git a/src/components/QuestionForm.js b/src/components/QuestionForm.js index f6b7cee78..4d4a1cc42 100644 --- a/src/components/QuestionForm.js +++ b/src/components/QuestionForm.js @@ -7,7 +7,7 @@ function QuestionForm({ addQuestion }) { answer2: "", answer3: "", answer4: "", - correctIndex: 0, + correctIndex: "", }); function handleChange(event) { @@ -19,6 +19,7 @@ function QuestionForm({ addQuestion }) { function handleSubmit(event) { event.preventDefault(); + const newQuestion = { prompt: formData.prompt, answers: [ @@ -39,6 +40,14 @@ function QuestionForm({ addQuestion }) { }) .then((res) => res.json()) .then((newQuestion) => addQuestion(newQuestion)); + setFormData({ + prompt: "", + answer1: "", + answer2: "", + answer3: "", + answer4: "", + correctIndex: "", + }); } return ( diff --git a/src/components/QuestionItem.js b/src/components/QuestionItem.js index c947d3d1f..d6bdd2246 100644 --- a/src/components/QuestionItem.js +++ b/src/components/QuestionItem.js @@ -1,6 +1,6 @@ import React from "react"; -function QuestionItem({ question, deleteQuestion }) { +function QuestionItem({ question, deleteQuestion, updateQuestion }) { const { id, prompt, answers, correctIndex } = question; const options = answers.map((answer, index) => ( @@ -16,13 +16,31 @@ function QuestionItem({ question, deleteQuestion }) { .then(() => deleteQuestion(question)); }; + const answerChange = (event) => { + const newIndex = parseInt(event.target.value); + + fetch(`http://localhost:4000/questions/${id}`, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ correctIndex: newIndex }), + }) + .then((res) => res.json()) + .then((updatedQuestion) => { + updateQuestion(updatedQuestion); + }); + }; + return (

  • Question {id}

    Prompt: {prompt}
    • diff --git a/src/components/QuestionList.js b/src/components/QuestionList.js index bc3ab91bb..c3ac9bffc 100644 --- a/src/components/QuestionList.js +++ b/src/components/QuestionList.js @@ -1,41 +1,19 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import QuestionItem from "./QuestionItem"; -import QuestionForm from "./QuestionForm"; - -function QuestionList() { - const [questions, setQuestions] = useState([]); - - useEffect(() => { - fetch("http://localhost:4000/questions") - .then((res) => res.json()) - .then((questions) => { - setQuestions(questions); - }); - }, []); - - const addQuestion = (newQuestion) => { - setQuestions([...questions, newQuestion]); - }; - - const deleteQuestion = (deletedQuestion) => { - const updatedQuestions = questions.filter( - (question) => question.id !== deletedQuestion.id - ); - setQuestions(updatedQuestions); - }; +function QuestionList({ questions, deleteQuestion, updateQuestion }) { const questionList = questions.map((question) => ( )); return (

    Quiz Questions

    -
      {questionList}
    );