ADropdownForm.tsx 1.04 KB
Newer Older
1
import React, { useState } from "react";
2
import { DropdownType, AnswerProps } from "../types";
Lee SeoYeon's avatar
Lee SeoYeon committed
3

4
interface Props extends AnswerProps {
5
  element: DropdownType;
6
}
7

Jiwon Yoon's avatar
Jiwon Yoon committed
8
export const ADropdownForm = ({ element, answerQuestion }: Props) => {
Jiwon Yoon's avatar
Jiwon Yoon committed
9
10
11
12
  const [answer, setAnswer] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const { value } = event.currentTarget;
Jiwon Yoon's avatar
Jiwon Yoon committed
13
    answerQuestion.answer = value;
Jiwon Yoon's avatar
Jiwon Yoon committed
14
    setAnswer(value);
Jiwon Yoon's avatar
Jiwon Yoon committed
15
16
17
18
19
20
    if (answerQuestion.answer) {
      answerQuestion.requiredCheck = true;
    } else {
      answerQuestion.requiredCheck = false;
    }
    console.log(answerQuestion);
Jiwon Yoon's avatar
Jiwon Yoon committed
21
  };
Lee SeoYeon's avatar
Lee SeoYeon committed
22
  return (
Lee SeoYeon's avatar
Lee SeoYeon committed
23
    <div className="flex flex-col container w-11/12 h-auto m-3 py-3">
Jiwon Yoon's avatar
Jiwon Yoon committed
24
      <select
jang dong hyeok's avatar
jang dong hyeok committed
25
        className="place-self-center py-2 w-48 hover:bg-gray-200 border border-black rounded"
Jiwon Yoon's avatar
Jiwon Yoon committed
26
27
        onChange={handleChange}
      >
28
        {element.content.choices.map((choice) => (
jang dong hyeok's avatar
jang dong hyeok committed
29
30
31
          <option key={choice.value} value={choice.text}>
            {choice.text}
          </option>
32
        ))}
Lee SeoYeon's avatar
Lee SeoYeon committed
33
34
35
36
      </select>
    </div>
  );
};