unique key props with Formik Fields

Question

I am mapping some text fields like this:

{
  AddVehicleFields.map(({formikRef, ...input}) => (
    <>
      <TextField
        key={formikRef}
        helperText={
          getIn(formik.touched, formikRef)
            ? getIn(formik.errors, formikRef)
            : ''
        }
        error={
          getIn(formik.touched, formikRef) &&
          Boolean(getIn(formik.errors, formikRef))
        }
        value={getIn(formik.values, formikRef)}
        {...input}
        variant="outlined"
        margin="normal"
        onChange={(props) => {
          formik.handleChange(props);
          formik.handleBlur(props);
        }}
        onBlur={formik.handleBlur}
      />
      <br />
    </>
  ));
}

where the fields look like this:

export const AddVehicleFields: Array<FormField> = [
  {
    id: 'freeSeats',
    name: 'freeSeats',
    formikRef: 'freeSeats',
    label: 'Free Seats',
  },

  {
    id: 'numberPlate',
    name: 'numberPlate',
    formikRef: 'numberPlate',
    label: 'Number Plate',
  },

I am already passing a key to each element but I still get index.js:1 Warning: Each child in a list should have a unique "key" prop.What should I try to fix this?

Answer 1

The key needs to be on the outer most element. The one that encapsulates all the children. In this case, it's a React fragment. So change it to this:

        {AddVehicleFields.map(({ formikRef, ...input }) => (
          <React.Fragment key={formikRef}>
            <TextField
              helperText={
                getIn(formik.touched, formikRef)
                  ? getIn(formik.errors, formikRef)
                  : ''
              }
              error={
                getIn(formik.touched, formikRef) &&
                Boolean(getIn(formik.errors, formikRef))
              }
              value={getIn(formik.values, formikRef)}
              {...input}
              variant="outlined"
              margin="normal"
              onChange={props => {
                formik.handleChange(props);
                formik.handleBlur(props);
              }}
              onBlur={formik.handleBlur}
            />
            <br />
          </React.Fragment>
        ))}

Answer 2

You need to move key in the child to the root component

{
  AddVehicleFields.map(({formikRef, ...input}) => (
    // add key here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    <div key={formikRef}>
      <TextField
        helperText={
          getIn(formik.touched, formikRef)
            ? getIn(formik.errors, formikRef)
            : ''
        }
        error={
          getIn(formik.touched, formikRef) &&
          Boolean(getIn(formik.errors, formikRef))
        }
        value={getIn(formik.values, formikRef)}
        {...input}
        variant="outlined"
        margin="normal"
        onChange={(props) => {
          formik.handleChange(props);
          formik.handleBlur(props);
        }}
        onBlur={formik.handleBlur}
      />
      <br />
    </div>
  ));
}