Formik + Material UI bug when i submit form and try to change the values

Question

I have this formik code and i have a handleSubmit that get the values and change the values for other data :

async function handleSubmit(values) {
  const newValues = {...values};
  newValues.employee_type = newValues.employee_type.id
  newValues.specialties.main = newValues.specialties.main.id
  newValues.specialties.secondary = newValues.specialties.secondary.id
  newValues.specialties.tertiary = newValues.specialties.tertiary.id

  console.log(newValues)
}

when i try to change the values came from formik, the input values in the screen changes too. For example this line : newValues.employee_type = newValues.employee_type.idby default the employee_type came to me like a object with id key, and i want to replace this object with only the id inside itself. but when i do this, the input that have the name employee_type, becomes empty in the screen, anyone can help me ?

          initialValues={{ ...initialValues }}
          validationSchema={validator}
          onSubmit={handleSubmit}
          enableReinitialize
        >
          {({ handleBlur, setFieldValue, getFieldProps, resetForm }) => (
            <Form>
              <Box sx={{ width: "100%" }}>
                <Grid container spacing={2} sx={{}}>
                  <Grid item xs={4}>
                    <FormTextField name="name" label="Nome" />
                  </Grid>
                  <Grid item xs={3}>
                    <FormDate
                      name="birthday"
                      label="Data de Nascimento"
                      required={true}
                    />
                  </Grid>
                  <Grid item xs={3} alignItems="stretch">
                    <FormSelectField
                      name="genre"
                      label="Gênero"
                      options={genders}
                      required
                    />
                  </Grid>
                  <Grid item xs={2} alignItems="stretch">
                    <FormSelectField
                      name="nationality"
                      label="Nacionalidade"
                      options={countries}
                      required
                    />
                  </Grid>
                  <Grid item xs={4} alignItems="stretch">
                    <FormTextField name="social_name" label="Nome Social" />
                  </Grid>
                  <Grid item xs={3} alignItems="stretch">
                    <FormTextField
                      name="naturality"
                      label="Naturalidade"
                      required
                    />
                  </Grid>
                  <Grid item xs={3} alignItems="stretch">
                    <FormSelectField
                      name="ethnicity"
                      label="Etnia"
                      options={ethnicity}
                      required
                    />
                  </Grid>
                  <Grid item xs={2} alignItems="stretch">
                    <FormSelectField
                      name="marital_status"
                      label="Estado Civil"
                      options={states}
                    />
                  </Grid>
                  <Grid item xs={4} alignItems="stretch">
                    <FormTextField
                      name="physic_national"
                      label="CPF"
                      mask="999.999.999-99"
                      required
                    />
                  </Grid>
                  <Grid item xs={4} alignItems="stretch">
                    <FormTextField
                      name="ident_national"
                      label="Registro Geral"
                      required
                    />
                  </Grid>
                  <Grid item xs={4} alignItems="stretch">
                    <FormTextField
                      name="issuing_body"
                      label="Orgão Emissor"
                      required
                    />
                  </Grid>
                </Grid>
                <div
                  style={{
                    marginBottom: "20px",
                    marginTop: "20px",
                  }}
                >
                  <Typography
                    variant="h7"
                    color="secondary"
                    fontWeight="500"
                    sx={{ marginTop: "20px" }}
                  >
                    Dados de Contato
                  </Typography>
                </div>
                <Grid container spacing={2} sx={{}}>
                  <Grid item xs={4} alignItems="stretch">
                    <FormTextField
                      name="contact.email"
                      type="email"
                      label="Email"
                      required
                    />
                  </Grid>
                  <Grid item xs={4} alignItems="stretch">
                    <FormTextField
                      name="contact.phone"
                      label="Telefone"
                      mask="+99 (99) 99999-9999"
                    />
                  </Grid>
                  <Grid item xs={4} alignItems="stretch">
                    <FormTextField name="contact.cell_phone" label="Celular" />
                  </Grid>
                  <br></br>
                  <Grid item xs={2}>
                    <FormTextField
                      name="contact.cep"
                      label="CEP"
                      required
                      onBlur={(e) => handleOnBlur(e, handleBlur, setFieldValue)}
                      mask="99999-999"
                    />
                  </Grid>
                  <Grid item xs={2}>
                    <FormTextField
                      name="contact.address_number"
                      label="Número"
                      required
                      type="number"
                      InputProps={{ inputProps: { min: 0 } }}
                    />
                  </Grid>
                  <Grid item xs={2}>
                    <FormTextField
                      name="contact.street"
                      fullWidth
                      size="small"
                      label="Logradouro"
                      disabled={true}
                      InputLabelProps={{ shrink: true }}
                    />
                  </Grid>
                  <Grid item xs={2}>
                    <FormTextField
                      name="contact.district"
                      fullWidth
                      size="small"
                      label="Bairro"
                      disabled={true}
                      InputLabelProps={{ shrink: true }}
                    />
                  </Grid>
                  <Grid item xs={2}>
                    <FormTextField
                      name="contact.county"
                      fullWidth
                      size="small"
                      label="Localidade"
                      disabled={true}
                      InputLabelProps={{ shrink: true }}
                    />
                  </Grid>
                  <Grid item xs={2}>
                    <FormTextField
                      name="contact.state"
                      fullWidth
                      size="small"
                      label="Estado"
                      disabled={true}
                      InputLabelProps={{ shrink: true }}
                    />
                  </Grid>
                </Grid>
                <div
                  style={{
                    marginBottom: "20px",
                    display: "flex",
                  }}
                >
                  <Typography
                    variant="h7"
                    color="secondary"
                    fontWeight="500"
                    sx={{ marginTop: "20px" }}
                  >
                    Dados de Acesso
                  </Typography>
                </div>
                <Grid container spacing={2} sx={{}}>
                  <Grid item xs={4}>
                    <FormTextField
                      name="user_login"
                      label="Nome de Acesso"
                      autoComplete="username"
                    />
                  </Grid>
                  <Grid item xs={4}>
                    <FormTextField
                      name="pass_login"
                      label="Senha"
                      type="password"
                      autoComplete="new-password"
                    />
                  </Grid>
                  <Grid item xs={4}>
                    <FormTextField
                      name="pass_login_confirmation"
                      label="Repita a Senha"
                      type="password"
                      autoComplete="new-password"
                    />
                  </Grid>
                  <Grid item xs={4}>
                    {/* <FormTextField name="" label="Confirmar Senha" /> */}
                  </Grid>
                </Grid>
                <div
                  style={{
                    marginBottom: "20px",
                    display: "flex",
                  }}
                >
                  <Typography variant="h7" color="secondary" fontWeight="500">
                    Dados Profissionais
                  </Typography>
                </div>
                <Grid container spacing={2}>
                  <Grid item xs={6}>
                    <Grid container spacing={2}>
                      <Grid item xs={12}>
                        <FormSearchSelectField
                          name="employee_type"
                          options={types}
                          label="Tipo do Prestador :"
                          getOptionLabel={(type) =>
                            type.description ? type.description : ""
                          }
                          handleChange={(_, value) => {
                            setFieldValue(
                              "council",
                              value && value.council ? value.council.id : ""
                            );
                            setCouncil(
                              (value && value.council.description) || ""
                            );
                            setFieldValue("employee_type", value);
                          }}
                          isOptionEqualToValue={(type, value) =>
                            type.id === value.id ? true : false
                          }
                        />
                      </Grid>
                      <Grid item xs={12}>
                        <TextField
                          fullWidth
                          size="small"
                          InputLabelProps={{
                            shrink: true,
                          }}
                          name=""
                          label="Conselho :"
                          multiple
                          InputProps={{
                            value: council,
                          }}
                          disabled
                        ></TextField>
                      </Grid>
                      <Grid item xs={6}>
                        <FormTextField
                          name="council_uf"
                          label="UF :"
                          select
                          multiple
                        >
                          {ufs.map((item, key) => {
                            return (
                              <MenuItem key={item} value={item}>
                                {item}
                              </MenuItem>
                            );
                          })}
                        </FormTextField>
                      </Grid>
                      <Grid item xs={6}>
                        <FormTextField
                          name="council_ident"
                          label="Número :"
                          type="number"
                          InputProps={{ inputProps: { min: 0 } }}
                        ></FormTextField>
                      </Grid>
                    </Grid>
                  </Grid>
                  <Grid item xs={6}>
                    <Box
                      sx={{
                        borderRadius: 1,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <Grid container spacing={2}>
                        <Grid item xs={12}>
                          <FormSearchSelectField
                            name="specialties.main"
                            options={specialties.filter((item) => {
                              let secondary =
                                getFieldProps("specialties").value.secondary;
                              let tertiary =
                                getFieldProps("specialties").value.tertiary;
                              if (secondary && tertiary) {
                                if (
                                  item.id !== secondary.id &&
                                  item.id !== tertiary.id
                                ) {
                                  return item;
                                }
                              } else if (secondary) {
                                if (item.id !== secondary.id) {
                                  return item;
                                }
                              } else if (tertiary) {
                                if (item.id !== tertiary.id) {
                                  return item;
                                }
                              } else {
                                return item;
                              }
                            })}
                            label="Especialidade Principal :"
                            required
                            getOptionLabel={(specialty) =>
                              specialty.describe ? specialty.describe : ""
                            }
                            handleChange={(_, value) => {
                              setDisableOther(false);
                              setFieldValue("specialties.main", value);
                            }}
                            isOptionEqualToValue={(specialty, value) => {
                              return specialty.id === value.id ? true : false;
                            }}
                          />
                        </Grid>
                        <Grid item xs={12}>
                          <FormSearchSelectField
                            name="specialties.secondary"
                            options={specialties.filter((item) => {
                              let main = getFieldProps("specialties").value.main;
                              let tertiary = getFieldProps("specialties").value.tertiary;
                              if (main && tertiary) {
                                if (
                                  item.id !== main.id &&
                                  item.id !== tertiary.id
                                ) {
                                  return item;
                                }
                              } else if (main) {
                                if (item.id !== main.id) {
                                  return item;
                                }
                              } else if (tertiary) {
                                if (item.id !== tertiary.id) {
                                  return item;
                                }
                              } else {
                                return item;
                              }
                            })}
                            label="Outras :"
                            getOptionLabel={(specialty) =>
                              specialty.describe ? specialty.describe : ""
                            }
                            list={[]}
                            handleChange={(_, value) => {
                              setDisableOther(false);
                              setFieldValue("specialties.secondary", value);
                            }}
                            isOptionEqualToValue={(specialty, value) => {
                              return specialty.id === value.id ? true : false;
                            }}
                          />
                        </Grid>
                        <Grid item xs={12}>
                          <FormSearchSelectField
                            name="specialties.tertiary"
                            options={specialties.filter((item) => {
                              let main = getFieldProps("specialties").value.main;
                              let secondary = getFieldProps("specialties").value.secondary;
                              if (main && secondary) {
                                if (
                                  item.id !== main.id &&
                                  item.id !== secondary.id
                                ) {
                                  return item;
                                }
                              } else if (main) {
                                if (item.id !== main.id) {
                                  return item;
                                }
                              } else if (secondary) {
                                if (item.id !== secondary.id) {
                                  return item;
                                }
                              } else {
                                return item;
                              }
                            })}
                            label="Outras :"
                            getOptionLabel={(specialty) =>
                              specialty.describe ? specialty.describe : ""
                            }
                            list={[]}
                            handleChange={(_, value) => {
                              setDisableOther(false);
                              setFieldValue("specialties.tertiary", value);
                            }}
                            isOptionEqualToValue={(specialty, value) => {
                              return specialty.id === value.id ? true : false;
                            }}
                          />
                        </Grid>
                      </Grid>
                    </Box>
                  </Grid>
                  <Grid item>
                    {loading ? (
                      <Button
                        disabled
                        sx={{
                          bgcolor: "rgba(8, 153, 186, 0.1)",
                          color: "white",
                        }}
                      >
                        <CircularProgress
                          color="primary"
                          size={20}
                          sx={{ mr: 1 }}
                        />{" "}
                        Cadastrando...
                      </Button>
                    ) : (
                      <SubmitButton>Cadastrar</SubmitButton>
                    )}
                  </Grid>
                </Grid>
              </Box>
            </Form>
          )}
        </Formik>

Answer 1

const newValues = {...values} - creates a new object 'newValues' but all the keys hold references to the same objects as keys in 'values'. You need to make deep clone of the 'values'. To do this, use lodash:

const newValues = _.cloneDeep(values)

or more dirty method (not recommended in general):

const newValues = JSON.parse(JSON.stringify(values));