megkadams megkadams - 1 month ago 11
React JSX Question

How to initialize a FieldArray from state using redux-form?

Am using a redux-form FieldArray to allow user to create blocks of open times for their store on different days.

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.

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.

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


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

Help is much appreciated!

Answer

The values you pass to initialValues (or via a dispatched initialize() action) need to be in the same structure as what redux-form gives you when you create the array from scratch. So, judging from your code, I'd say something like:

[
  { 
    day: 1, 
    fromTime: '10:00', 
    untilTime: '11:00', 
    service_type: 1, 
    peoplePer: 3,
    timeslotDuration: 4
  }
  { 
    day: 2, 
    fromTime: '12:00', 
    untilTime: '13:00', 
    service_type: 0, 
    peoplePer: 2,
    timeslotDuration: 2
  }
]

I've quickly coded up a simple example for you here, so you can see it working: InitializeFromStateForm.js