AEssayForm.tsx 883 Bytes
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
2
import React, { useState } from "react";
import { EssayType, AnswerType } from "../types";
Lee SeoYeon's avatar
Lee SeoYeon committed
3

4
5
type Props = {
  element: EssayType;
Jiwon Yoon's avatar
Jiwon Yoon committed
6
7
  response: AnswerType;
  handleAnswer: () => void;
8
9
};

Jiwon Yoon's avatar
Jiwon Yoon committed
10
11
12
13
14
15
16
17
18
19
20
21
22
export const AEssayForm = ({ element, handleAnswer, response }: Props) => {
  const [answer, setAnswer] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.currentTarget;
    response.answers.map((a) => {
      if (a.questionId === element._id) {
        a.answer = value;
      }
    });
    setAnswer(value);
    handleAnswer();
  };
Lee SeoYeon's avatar
Lee SeoYeon committed
23
  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
24
25
26
27
28
29
30
    <div className="flex mt-3 w-full justify-center">
      <input
        type="text"
        className="border w-11/12 h-36 my-3"
        id={element._id}
        onChange={handleChange}
        value={answer}
Jiwon Yoon's avatar
Jiwon Yoon committed
31
        required={element.isRequired}
Jiwon Yoon's avatar
Jiwon Yoon committed
32
      ></input>
Lee SeoYeon's avatar
Lee SeoYeon committed
33
34
35
    </div>
  );
};