components

SurveyFrontend/src/components/QuestionsList/QuestionsList.module.css

@@ -0,0 +1,2 @@
+/*QuestionsList.module.css*/
+

SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx

@@ -0,0 +1,38 @@
+import React, {useState} from "react";
+import QuestionItem from "../QuestionItem/QuestionItem.tsx";
+import AddQuestionButton from "../AddQuestionButton/AddQuestionButton.tsx";
+
+interface QuestionsListProps {}
+
+interface Question {
+    id: number;
+}
+
+const QuestionsList: React.FC<QuestionsListProps> = () => {
+    const [questions, setQuestions] = useState<Question[]>([
+        {id: 1},
+    ]);
+
+    const handleAddQuestion = () => {
+        // Find the highest ID in the current questions list
+        const maxId = questions.reduce((max, question) => Math.max(max, question.id), 0);
+        const newQuestion: Question = {
+            id: maxId + 1, // Increment the ID
+        };
+        setQuestions([...questions, newQuestion]); // Add the new question to the state
+    };
+
+    return (
+        <>
+            {questions.map((question, index) => (
+                <QuestionItem
+                    key={question.id}
+                    indexQuestion={index + 1}
+                />
+            ))}
+            <AddQuestionButton onClick={handleAddQuestion} />
+        </>
+    );
+};
+
+export default QuestionsList;