TransWikia.com

Como alterar o valor de um objeto dentro do array com Formik e Yup?

Stack Overflow em Português Asked by Bruno Elias de Souza on November 25, 2021

Aqui eu crio os valores iniciais do shape:

const defaultFormShape = {
  name: '',
  email: '',
  group: { id: '' },
  addresses: [{
    name: ''
  ]}
};

E aqui valido o Schema:

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required.'),
  email: Yup.string().required('Email is required.'),
  group: Yup.object().shape({ 
    id: Yup.string().required('Group ID is required.')
  }).nullable(),
  addresses: Yup.array().of(
    Yup.object().shape({
      name: Yup.string().required('Addresses name is required.')
    }),
    Yup.object().shape({
      street: Yup.string().required('Addresses street is required.')
    })
  ).nullable()
});

o que eu preciso, é que quando o usuário estiver em modo edição do formulário, pegue o valor que está vindo da API, exiba no input e permita alterar esse valor. Até aí tudo bem, porém estou com problema para editar o valor do objeto name dentro do array. To tentando fazer dessa forma no input:

<TextField
  error={Boolean(touched.addresses && errors.addresses && errors.addresses.map(addressesName => addressesName.name) )}
  helperText={touched.addresses && errors.addresses && errors.addresses.map(addressesName => addressesName.name) }
  fullWidth
  label="Addresses Name"
  name='addressesName'
  onBlur={handleBlur}
  onChange={handleChange}
  value={Array.isArray(values.addresses) ? values.addresses.map(value => value.name) : values.addresses}
  variant="outlined"
/>

Então, preciso que quando houver a mudança no input, acesse o array addresses e edite o valor da key name

inserir a descrição da imagem aqui

One Answer

O problema era o name do input, colocando dessa forma:

<TextField
  error={Boolean(touched.addresses && errors.addresses && errors.addresses.map(addressesName => addressesName.name))}
  helperText={touched.addresses && errors.addresses && errors.addresses.map(addressesName => addressesName.name)}
  fullWidth
  label="Addresses Name"
  name='addresses[0][name]' //aqui a resolução
  onBlur={handleBlur}
  onChange={handleChange}
  value={Array.isArray(values.addresses) ? values.addresses.map(value => value.name) : values.addresses}
  variant="outlined"
/>

que é o que a API espera, deu certo.

Answered by Bruno Elias de Souza on November 25, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP