38 lines
No EOL
1.1 KiB
TypeScript
38 lines
No EOL
1.1 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;
|
|
}
|
|
|
|
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; |