How to initialize a FieldArray from state using redux-form?
<p>Am using a redux-form FieldArray to allow user to create blocks of open times for their store on different days.</p>

<p>Working fine to add them, but once created, need to load a form on their 'Edit Store Open Times' section with initially created data in order to make changes later.</p>

<p>Can't figure out how to loop through returned information. The following works to create, but I need solution to pull in and print out the service blocks into fieldsets so user can edit and resubmit.</p>

<pre><code>    renderGroups = ({ fields, meta: { touched, error } }) =&gt; {
      return (
        &lt;div&gt;
          {fields.map((service, index) =&gt;
            &lt;div className="service-type-group" key={index}&gt;
              &lt;h4&gt;{this.stringifyServiceNumbers(index + 1)} Service&lt;/h4&gt;
              &lt;button
                type="button"
                className="remove-button"
                onClick={() =&gt; fields.remove(index)}&gt;Remove
              &lt;/button&gt;
              &lt;div className="field-group third"&gt;
                &lt;Field
                  name={`${service}.day`}
                  component={SelectField}
                  floatingLabelText="Day of week"
                  className="textfield"&gt;
                    &lt;MenuItem value={1} primaryText="Monday" /&gt;
                    &lt;MenuItem value={2} primaryText="Tuesday" /&gt;
                    &lt;MenuItem value={3} primaryText="Wednesday" /&gt;
                    &lt;MenuItem value={4} primaryText="Thursday" /&gt;
                    &lt;MenuItem value={5} primaryText="Friday" /&gt;
                    &lt;MenuItem value={6} primaryText="Saturday" /&gt;
                    &lt;MenuItem value={0} primaryText="Sunday" /&gt;
                &lt;/Field&gt;
                &lt;Field
                  name={`${service}.fromTime`}
                  component={TimePicker}
                  defaultValue={null}
                  floatingLabelText="From"
                  className="textfield"
                /&gt;
                &lt;Field
                  name={`${service}.untilTime`}
                  component={TimePicker}
                  defaultValue={null}
                  floatingLabelText="To"
                  className="textfield"
                /&gt;
              &lt;/div&gt;
              &lt;div className="field-group half"&gt;
                &lt;Field
                  name={`${service}.service_type`}
                  component={SelectField}
                  floatingLabelText="Service type"
                  className="textfield"&gt;
                  &lt;MenuItem value={0} primaryText="First-come first-served" /&gt;
                  &lt;MenuItem value={1} primaryText="Appointment" /&gt;
                &lt;/Field&gt;
              &lt;/div&gt;
              &lt;div className="field-group sentence-inline"&gt;
                &lt;Field
                  name={`${service}.peoplePer`}
                  type="number"
                  component={TextField}
                  label="Number of people per timeslot"
                  className="textfield"
                /&gt;
                &lt;p&gt;people are allowed every&lt;/p&gt;
                &lt;Field
                  name={`${service}.timeslotDuration`}
                  component={SelectField}
                  className="textfield"&gt;
                  &lt;MenuItem value={0} primaryText="5 minutes" /&gt;
                  &lt;MenuItem value={1} primaryText="10 minutes" /&gt;
                  &lt;MenuItem value={2} primaryText="15 minutes" /&gt;
                  &lt;MenuItem value={3} primaryText="30 minutes" /&gt;
                  &lt;MenuItem value={4} primaryText="60 minutes" /&gt;
                  &lt;MenuItem value={5} primaryText="All day" /&gt;
                &lt;/Field&gt;
                &lt;p&gt;.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
          &lt;button
            type="button"
            className="action-button"
            onClick={() =&gt; fields.push({})}&gt;Add Service
          &lt;/button&gt;
          {touched &amp;&amp; error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;}
        &lt;/div&gt;
      );
    }
</code></pre>

<p>All other fields are populating correctly by fetching pantry data from api on ComponentWillMount. Just need that FieldArray information and markup.</p>

<p>Help is much appreciated!</p>