Untitled

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { FaTimes } from 'react-icons/fa';

const initialValues = {
  userEduDto: []
};

const options = [
  { id: 1, label: 'ssc' },
  { id: 2, label: 'hsc' },
  { id: 3, label: 'bsc' }
];

const EducationForm = () => {
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={(values, { setSubmitting }) => {
        // Handle form submission here
        console.log(values);
        setSubmitting(false);
      }}
    >
      {({ values, setFieldValue }) => (
        <Form>
          <div>
            <label htmlFor="educationId">Select Education:</label>
            <Field
              as="select"
              id="educationId"
              name="educationId"
              onChange={(e) => {
                const selectedId = parseInt(e.target.value, 10);
                if (!values.userEduDto.find(edu => edu.educationId === selectedId)) {
                  setFieldValue('userEduDto', [...values.userEduDto, { educationId: selectedId, educationResultType: [{ cgpa: '' }] }]);
                }
              }}
            >
              <option value="">Select</option>
              {options.map((option) => (
                <option key={option.id} value={option.id}>
                  {option.label}
                </option>
              ))}
            </Field>
          </div>
          <div>
            {values.userEduDto.map((edu, index) => (
              <div key={index} className="selected-education">
                <span>{options.find(option => option.id === edu.educationId)?.label}</span>
                <FaTimes
                  className="remove-icon"
                  onClick={() => {
                    const updatedUserEduDto = [...values.userEduDto];
                    updatedUserEduDto.splice(index, 1);
                    setFieldValue('userEduDto', updatedUserEduDto);
                  }}
                />
              </div>
            ))}
          </div>
          {values.userEduDto.map((edu, index) => (
            <div key={index}>
              {edu.educationResultType.map((result, resultIndex) => (
                <div key={resultIndex}>
                  <label htmlFor={userEduDto[${index}].educationResultType[${resultIndex}].cgpa}>CGPA:</label>
                  <Field
                    type="text"
                    id={userEduDto[${index}].educationResultType[${resultIndex}].cgpa}
                    name={userEduDto[${index}].educationResultType[${resultIndex}].cgpa}
                  />
                </div>
              ))}
            </div>
          ))}
          <ErrorMessage name="userEduDto" component="div" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

export default EducationForm;