need-help-how-to-get-dynamic-input-fileds-value.tsx

import React, { FormEvent } from "react";
import { SectionTitle } from "@shared";
import { Text } from "@atoms";
import { FormText } from "@cells";
import { Label } from "@molecules";
import styles from "./Contact.module.css";
import { FieldHint, FieldLabel, FormSubmit, FormTerms } from "./FormComponents";
import { radioFields, textFields } from "@/data";
import { useState } from "react";

const Contact = () => {
  const [formField, setFormField] = useState({});
  const formArry: any[] = [];
  const onChange = (event: any, id: number, name: string) => {
    setFormField({ [name]: event.target.value });
    formArry.push(formField);

    console.log(formField);
  };

  return (
    <>
      <section className="flex flex-col" id="contact">
        <SectionTitle>Contact</SectionTitle>
        <Text align="center">会社概要</Text>
        <div className="contact-form flex flex-col items-center px-5">
          <div className="my-8" />
          <div className="mx-5">
            <Text
              size="text-base max-sm:text-sm"
              align="center"
              textClass={`${styles["contact-form__desc"]}`}
            >
              以下のフォームに必要事項をご入力の上、ご送信ください。
              <br />
              いただいたお問い合わせには、2営業日以内にご返信いたします。
            </Text>
          </div>
          <div className="my-5" />
          <div>this is form {formArry} here is</div>
          <div
            className={`${styles["contact-form__fields"]} w-full 2xl:w-[780px] xl:w-[780px] lg:w-[780px] md:w-[720px] sm:w-[600px] flex flex-col gap-y-8 mx-5`}
          >
            {/* input type = text */}
            {textFields.map((textField) => (
              <div key={textField.id} className="">
                <FormText
                  name={textField.name}
                  onChange={(e) => onChange(e, textField.id, textField.name)}
                  label={textField.label}
                  chipText={textField.chipText}
                  hint={textField.hint}
                />
              </div>
            ))}

            {/* radio and textarea*/}
            <div className="flex flex-col gap-y-8">
              <Label chip chipText="必須">
                お問い合わせ内容
              </Label>

              {/* radio */}
              <div className="flex flex-col gap-y-3">
                <FieldLabel children={"種別"} />
                <div className="flex justify-between max-md:flex-col max-md:gap-y-3">
                  {radioFields.map((radioField) => (
                    <label
                      key={radioField.id}
                      className="flex items-center gap-x-2"
                    >
                      <input
                        className="form-radio w-[18px] h-[18px]"
                        type="radio"
                        name="radio-direct"
                        value="1"
                      />
                      <Text size="text-base" textColor="text-black">
                        {radioField.label}
                      </Text>
                    </label>
                  ))}
                </div>
              </div>

              {/* input type = text */}
              <div className="flex flex-col gap-y-2">
                <FieldLabel children={"件名"} />
                <div className="">
                  <input
                    type="text"
                    className="form-input mt-1 block w-full border border-[#D4D6D9]"
                    placeholder=""
                  />
                  <div className="my-1" />
                  {/* <Text textColor="text-[#A2A4A6]" size="text-sm">
                    例：取扱い商品の○○に関して
                  </Text> */}
                  <FieldHint children={"例：取扱い商品の○○に関して"} />
                </div>
              </div>

              {/* textarea */}
              <div className="flex flex-col gap-y-2">
                <FieldLabel children={"本文"} />
                <div className="">
                  <textarea
                    className="form-textarea mt-1 block w-full h-[12.5rem] border resize-none border-[#D4D6D9]"
                    rows={3}
                    placeholder=""
                  ></textarea>
                  <div className="my-1" />
                  {/* <Text textColor="text-[#A2A4A6]" size="text-sm">
                    こちらにお問い合わせの詳細について記載してください。
                  </Text> */}
                  <FieldHint
                    children={
                      "こちらにお問い合わせの詳細について記載してください。"
                    }
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="my-8 max-sm:my-4" />
          <div className="contact-form__submit-block mx-5 flex flex-col justify-center items-center">
            <FormTerms />
            <FormSubmit />
          </div>
        </div>
      </section>
    </>
  );
};

export default Contact;

// support@future-traditional.co.jp