Redux form - How to populate initial values in FormSection components

Question

I have followed this advice on the redux-form docs where it indicates its advantageous to make the main form comprised of many components using "FormSection".

Having done that I have a client form with a Address component embedded as follows:

      <FormSection name="Address">
           <Address />
      </FormSection>

It works.

However, when I want to set the initial values of the main form from state as per this example in the redux forms docs the main form populates but the Address component in the FormSection does not.

I used this code at the bottom of the client component to connect to the state:

  let ClientForm2 = connect(
    (state, ownProps) => ({
      initialValues: state.editClient, 
      enableReinitialize: true
    }),
        { reducer }
  )(ClientForm);

How do you populate you FormSections with the initial values from state that come from the main form?

There is no information on how to populate formsections with intial data...

Answer 1

Old'ish question, but I had the same problem. Did you try shaping your initialValues data into this form?

{
 field1: 'a default value', 
 field2: 'somevalue2',
 Address: { formSectionFieldName1: 'test value', } 
}

The FormSection.name in this case should be a nested object. Not a string like, 'address.formSectionFieldName2': 'test value'