ARadioForm.tsx 1.17 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
import React, { useState } from "react";
2
import { RadioType, AnswersType } from "../types";
Lee SeoYeon's avatar
Lee SeoYeon committed
3

4
5
type Props = {
  element: RadioType;
Yoon, Daeki's avatar
Yoon, Daeki committed
6
  answers: AnswersType | undefined;
Jiwon Yoon's avatar
Jiwon Yoon committed
7
  handleAnswer: () => void;
8
};
Lee SeoYeon's avatar
Lee SeoYeon committed
9

10
export const ARadioForm = ({ element, answers, handleAnswer }: Props) => {
Jiwon Yoon's avatar
Jiwon Yoon committed
11
12
13
14
  const [answer, setAnswer] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.currentTarget;
15
16
17
18
19
    // response.answers.map((a) => {
    //   if (a.questionId === element._id) {
    //     a.answer = value;
    //   }
    // });
Yoon, Daeki's avatar
Yoon, Daeki committed
20
    answers && (answers.answer = value);
Jiwon Yoon's avatar
Jiwon Yoon committed
21
22
23
    setAnswer(value);
    handleAnswer();
  };
Lee SeoYeon's avatar
Lee SeoYeon committed
24
  return (
Lee SeoYeon's avatar
Lee SeoYeon committed
25
    <div className="flex w-full gap-2 justify-around my-3">
26
27
      {element.content.choices.map((choice) => (
        <div>
Jiwon Yoon's avatar
Jiwon Yoon committed
28
29
30
31
32
33
34
          <input
            className="mr-2"
            type="radio"
            id={choice.text}
            name={element._id}
            onChange={handleChange}
            value={choice.text}
Jiwon Yoon's avatar
Jiwon Yoon committed
35
            required={element.isRequired}
Jiwon Yoon's avatar
Jiwon Yoon committed
36
37
38
39
          ></input>
          <label className="text-lg" id={choice.text}>
            {choice.text}
          </label>
Lee SeoYeon's avatar
Lee SeoYeon committed
40
        </div>
41
      ))}
Lee SeoYeon's avatar
Lee SeoYeon committed
42
43
44
    </div>
  );
};