ARatingForm.tsx 1.52 KB
Newer Older
1
import React, { useState } from "react";
2
import { RatingType, AnswersType, AnswerProps } from "../types";
Lee SeoYeon's avatar
Lee SeoYeon committed
3

4
interface Props extends AnswerProps {
Lee SeoYeon's avatar
Lee SeoYeon committed
5
  element: RatingType;
Jiwon Yoon's avatar
Jiwon Yoon committed
6
  answerQuestion: any | undefined;
7
}
Lee SeoYeon's avatar
Lee SeoYeon committed
8

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

13
14
  function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
Jiwon Yoon's avatar
Jiwon Yoon committed
15
    const { name } = event.currentTarget;
Jiwon Yoon's avatar
Jiwon Yoon committed
16
    answerQuestion.answer = name;
Jiwon Yoon's avatar
Jiwon Yoon committed
17
    setAnswer(name);
18
    setSelectedchoice(event.currentTarget.name);
Jiwon Yoon's avatar
Jiwon Yoon committed
19
20
21
22
23
24
    if (answerQuestion.answer) {
      answerQuestion.requiredCheck = true;
    } else {
      answerQuestion.requiredCheck = false;
    }
    console.log(answerQuestion);
25
  }
Lee SeoYeon's avatar
Lee SeoYeon committed
26
  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
27
    <div className="flex w-full justify-center my-3">
28
      <label className="mt-3">{element.content.minRateDescription}</label>
Lee SeoYeon's avatar
Lee SeoYeon committed
29
      {element.content.choices.map((choice) => (
Jiwon Yoon's avatar
Jiwon Yoon committed
30
        <div className="flex gap-4 mx-1">
31
32
33
34
35
36
37
38
39
40
41
42
          <button
            type="button"
            className="border border-themeColor rounded-full w-12 h-12 text-center hover:bg-slate-300"
            name={choice.text}
            onClick={buttonClick}
            style={{
              backgroundColor:
                selectedchoice === choice.text ? "#58ACFA" : "white",
            }}
          >
            {choice.text}
          </button>
Lee SeoYeon's avatar
Lee SeoYeon committed
43
44
        </div>
      ))}
45
      <label className="mt-3">{element.content.maxRateDescription}</label>
Lee SeoYeon's avatar
Lee SeoYeon committed
46
47
48
    </div>
  );
};