bugfixed in quiz about unique key prop

tkhv · Nov 25, 2023 · 88d37aa · 88d37aa
1 parent 3ea6273
commit 88d37aa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/components/QuizEditor.tsx b/components/QuizEditor.tsx
@@ -130,23 +130,23 @@ const QuizEditor: React.FC<quizQuestionsProps> = ({
                 value={q.question}
                 onChange={(e) => handleQuestionChange(qIndex, e.target.value)}
                 placeholder="Type your question here."
-                key={q.questionNum}
               />
               {q.questionType == "MCQ" && (
                 <>
                   {q.options.map((option, oIndex) => (
-                    <div className="flex items-center space-x-2 p-2">
+                    <div
+                      className="flex items-center space-x-2 p-2"
+                      key={`option-${q.questionNum}-${oIndex}`}
+                    >
                       <Input
                         value={option}
                         onChange={(e) =>
                           handleOptionChange(qIndex, oIndex, e.target.value)
                         }
-                        key={`option${oIndex}`}
                       />
                       <Button
                         className="w-8 h-8 p-2"
                         onClick={() => deleteOption(qIndex, oIndex)}
-                        key={`delete_option${oIndex}`}
                       >
                         -
                       </Button>

diff --git a/pages/courses/[courseName]/quizzes/[quizName]/take.tsx b/pages/courses/[courseName]/quizzes/[quizName]/take.tsx
@@ -77,18 +77,19 @@ export default function QuizTake() {
       <ScrollArea className="h-[600px] w-[800px] rounded-md border p-4">
         <div>
           {questions.map((q) => (
-            <div className="flex flex-col rounded-md border m-5 p-4 ">
+            <div
+              className="flex flex-col rounded-md border m-5 p-4 "
+              key={q.questionNum}
+            >
               <div className="text-l pb-4">
                 {q.questionNum}.{q.question}
               </div>
               <RadioGroup defaultValue={q.question}>
                 {q.questionType == "MCQ" && q.options ? (
                   q.options.map((option) => (
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value={option} id={option} />
-                      <Label htmlFor="option" key={option}>
-                        {option}
-                      </Label>
+                    <div className="flex items-center space-x-2" key={option}>
+                      <RadioGroupItem value={option} />
+                      <Label htmlFor="option">{option}</Label>
                     </div>
                   ))
                 ) : (