How to use formik fieldarray index name within setFieldValue

Question

If I have the following <TimePicker/> code which is part of a Formik FieldArray, how can I access the name {timeWindowGroups.${index}.timeWindowAdhocStartTime} within setFieldValue() ?

                <Field 
                  component={TimePicker} 
                  name={`myGroups.${index}.timeStartTime`}
                  label="Start Time" 
                  variant= "dialog"
                  inputVariant="outlined"
                  ampm={false}
                  openTo="hours"
                  views={["hours", "minutes", "seconds"]}
                  format="HH:mm:ss"
                  value={timeWindowAdhocStartTime}
                  onChange={(val)=> {
                    const hours = new Date(val).getHours();
                    const minutes = new Date(val).getMinutes();
                    const seconds = new Date(val).getSeconds();
                    formikProps.setFieldValue("{`myGroups.${index}.timeStartTime`}",`${hours}:${(minutes<10?'0':'')}${minutes}:${(seconds<10?'0':'')}${seconds}`)                                  
                    setStartTime(val)
                  }
                }                  
                />            

I have tried the following but it's not working:

formikProps.setFieldValue("{`myGroups.${index}.timeStartTime`}", new Date()) 

The main reason is that I need to ensure that I only return the time portion of the entered time provided by the user. At the moment, when the time is selected, it is prepends the date to the time, which I don't want.

Any ideas on how to access the FieldArray name as part of setFieldValue ?

Answer 1

You can make use of field prop passed to the field component FormikTimePicker. It contains onChange, onBlur, name, and value of the field.

        const FormikTimePicker = ({ field, ...otherProps }) => {
            const handleChange = (val) => {
                const hours = new Date(val).getHours();
                const minutes = new Date(val).getMinutes();
                const seconds = new Date(val).getSeconds();
                field.onChange(`${hours}:${(minutes<10?'0':'')}${minutes}:${(seconds<10?'0':'')}${seconds}`)
            };
            return (
               <TimePicker
                   {...field}
                   onChange={handleChange}
                   // pass down other props needed
               />
            );
         };

          <Field 
              component={FormikTimePicker} 
              name={`myGroups.${index}.timeStartTime`}
              label="Start Time" 
              variant= "dialog"
              inputVariant="outlined"
              ampm={false}
              openTo="hours"
              views={["hours", "minutes", "seconds"]}
              format="HH:mm:ss"
            /> 

read more at https://formik.org/docs/api/field