54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import QuestionItem from "../QuestionItem/QuestionItem.tsx";
|
|
import AddQuestionButton from "../AddQuestionButton/AddQuestionButton.tsx";
|
|
|
|
interface QuestionsListProps {}
|
|
|
|
interface Question {
|
|
id: number;
|
|
text: string;
|
|
}
|
|
|
|
const QuestionsList: React.FC<QuestionsListProps> = () => {
|
|
const [questions, setQuestions] = useState<Question[]>([
|
|
{ id: 1, text: '' },
|
|
]);
|
|
|
|
const handleAddQuestion = () => {
|
|
const maxId = questions.reduce((max, question) => Math.max(max, question.id), 0);
|
|
const newQuestion: Question = {
|
|
id: maxId + 1,
|
|
text: ''
|
|
};
|
|
setQuestions([...questions, newQuestion]);
|
|
};
|
|
|
|
const handleQuestionChange = (id: number, value: string) => {
|
|
const newQuestions = questions.map((question) =>
|
|
question.id === id ? { ...question, text: value } : question
|
|
);
|
|
setQuestions(newQuestions);
|
|
};
|
|
|
|
const handleDeleteQuestion = (id: number) => {
|
|
const newQuestions = questions.filter((question) => question.id !== id);
|
|
setQuestions(newQuestions);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{questions.map((question) => (
|
|
<QuestionItem
|
|
key={question.id}
|
|
indexQuestion={question.id}
|
|
valueQuestion={question.text}
|
|
onDeleteQuestion={() => handleDeleteQuestion(question.id)}
|
|
onChangeQuestion={(value) => handleQuestionChange(question.id, value)}
|
|
/>
|
|
))}
|
|
<AddQuestionButton onClick={handleAddQuestion} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default QuestionsList;
|