gistfile1.txt

interface Schedule {
    starting:string,
    ending:string,
    enabled:boolean
    day?:string
    
}
interface Scheduling {
  [k:string]: Schedule
}
const schedule:Scheduling = {
    monday: {
        starting: "00:00",
        ending: "00:00",
        enabled: true,
    },
    tuesday: {
        starting: "00:00",
        ending: "00:00",
        enabled: true,
    },
};

function CustomInputStart({day, starting, ending, enabled}: {day:string, starting: string, ending:string, enabled: boolean}) {
  const { values, submitForm } = useFormikContext();
  const [field, meta, helpers] = useField(day);
   console.log(field)
 
    return <input type="time" className="outline 2"   {...field} />
}

function CustomInputEnd({day, starting, ending, enabled}: {day:string, starting: string, ending:string, enabled: boolean}) {
  const { values, submitForm } = useFormikContext();
  const [field, meta, helpers] = useField(day);
  console.log(field)
  
  return <input type="time" className="outline 2" {...field} />
}


function CustomCheckbox({day, starting, ending, enabled}: {day:string, starting: string, ending:string, enabled: boolean}) {
  
  //hi, day, starting, ending, enabled
    const [field, meta, helpers] = useField({ name: enabled.toString(), type: "checkbox" });

    return <input type="checkbox" />;
}
export default function Formiks() {
    const validationSchema = Yup.object().shape({
        monday: Yup.object().shape({
            starting: Yup.string(),
            ending: Yup.string(),
            enabled: Yup.boolean(),
        }),
        tuesday: Yup.object().shape({
            starting: Yup.string(),
            ending: Yup.string(),
            enabled: Yup.boolean(),
        }),
    });

    return (
        <>
            <Formik
                initialValues={{
                    monday: {
                        starting: "00:00",
                        ending: "00:00",
                        enabled: true,
                    },
                    tuesday: {
                        starting: "00:00",
                        ending: "00:00",
                        enabled: true,
                    },
                }}
                validationSchema={validationSchema}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2));
                        setSubmitting(false);
                    }, 400);
                }}
            >
                <Form>
                    <>
                        {Object.keys(schedule).map((day, index) => {      
                                          
                          return (

                            <>
                        <CustomCheckbox  day={day} {...schedule[day]}/>
                        <CustomInputStart day={day} {...schedule[day]}/>
                        <CustomInputEnd day={day} {...schedule[day]} />
                            </>
                          )
                        })}
                     

                        <button type="submit">Submit</button>
                    </>
                </Form>
            </Formik>
        </>
    );
}