Formik: How set default value for a FieldArray

[raisiqueira]

Hi. I have an a FieldArray for create one or more addresses for a determined user in an screen, but in another screen (edit screen), i need set the values for this FieldArray. How i can this?

this is my FieldArray:

    <FieldArray
      name="addresses"
      render={arrayHelpers => (
        <React.Fragment>
          {values.addresses.map((address, index) => (
            <div key={index}>
              <InputGroup size="large" style={{ marginBottom: '10px' }}>
                <Col span={6}>
                  <Input
                    placeholder="CEP"
                    name={`addresses[${index}].cep`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
                <Col span={6}>
                  <Input
                    placeholder="País"
                    name={`addresses[${index}].country`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
                <Col span={6}>
                  <Input
                    placeholder="Cidade"
                    name={`addresses[${index}].city`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
                <Col span={6}>
                  <Input
                    placeholder="Estado"
                    name={`addresses[${index}].state`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
              </InputGroup>
              <br />
              <InputGroup size="large" style={{ marginBottom: '10px' }}>
                <Col span={6}>
                  <Input
                    placeholder="Número"
                    name={`addresses[${index}].number`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
                <Col span={6}>
                  <Input
                    placeholder="Bairro"
                    name={`addresses[${index}].district`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
                <Col span={6}>
                  <Input
                    placeholder="Logradouro"
                    name={`addresses[${index}].street`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>

                <Col span={6}>
                  <Input
                    placeholder="Complemento"
                    name={`addresses[${index}].complement`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
              </InputGroup>
              <br />
              <InputGroup size="large" style={{ marginBottom: '10px' }}>
                <Col span={12}>
                  <Input
                    placeholder="Ponto de referência"
                    name={`addresses[${index}].refer_point`}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </Col>
              </InputGroup>
              <br />
              <Button
                type="danger"
                size="large"
                onClick={() => arrayHelpers.remove(index)}
                style={{ marginBottom: '10px' }}
              >
                Remover Endereço -
              </Button>
            </div>
          ))}
          <Button
            type="primary"
            size="large"
            onClick={() =>
              arrayHelpers.push({
                cep: '',
                country: '',
                city: '',
                state: '',
                district: '',
                street: '',
                number: '',
                complement: '',
                refer_point: '',
              })
            }
            block
          >
            Adicionar Endereço +
          </Button>
        </React.Fragment>
      )}
    />

[Saifadin]

Have you tried using initialValues on the Formik component for that?

Also can you elaborate what you mean by 'other screen' ?

[raisiqueira]

I'm passing the data in defaultValue prop in my input component, but the initialValues are returning empty.

I have another screen, but working perfectly.

the initialValues from screen that are not working:

  "initialValues": {
    "name": "",
    "surname": "",
    "cpf": "",
    "crm": "",
    "birthday": "",
    "addresses": [],
    "gener": "",
    "avatar": "",
    "specialities": [],
    "plan": ""
  },

initialValues from the screen that are working perfectly:

  "initialValues": {
    "username": "raisiqueira",
    "email": "[email protected]",
    "setor": "desenvolvimento2",
    "roles": []
  },

[Saifadin]

Your array for addresses is empty initially, of course the inputs won't be having any default values. you would need to pass the addresses initially like this:

// These might come from backend or anywhere else, but they have to be available
// during the initial loading of Formik
const addresses = [
  {
    cep: 'Lorem Ipsum',
    country: 'US',
    city: 'New York',
    state: 'New York',
    number: '25'
    ...
  }
];

...

<Formik
  initialValues={{
    name: "",
    surname: "",
    cpf: "",
    crm: "",
    birthday: "",
    addresses,
    gender: "",
    avatar: "",
    specialities: [],
    plan: ""
  }}
>
  ...
</Formik>

[raisiqueira]

I passed to mapPropsToValues:

  mapPropsToValues: props => ({
    name: props.myReduxState.data.name || '',
    surname: props.myReduxState.data.surname || '',
....
  }),

:D