How to get data nested with nested fields in redux-form?

Question

I have a scenario where there is a list of items and each items have name and value selector side by side(so two inputs). The user selects the name (its radio button) and then selects the value. I am using redux-form and so far what I achieved:

<Field name='item1' component={DropDownPicker} /> <Field name='item2' component={DropDownPicker} />

submitting gives value as {item1: 1, item2: 2}

Now there will lots of values for different category items and the it will be a big messy object with all category data in one place and I want to avoid that.

How can I get this one item data as {first: {item1: 1, item2: 2}} or as a collection [{item1: 1, item2: 2}]

Murther

Did you try to store the data as a list of objects? – Harrison

that might not help me in this case because the input might change – Murther

Answer 1

Wrap items into first object:

<Field name='first.item1' component={DropDownPicker} />
<Field name='first.item2' component={DropDownPicker} />

On submitting you'll get {first: {item1: 1, item2: 2}}.

Laidlaw

generic Field validation does not work in this case const required = value => value ? undefined : 'Required'; – Hylotheism

Answer 2

You can also use FormSection

import { FormSection } from 'redux-form';

then..

<FormSection name="first">
  <Field name="item1" component={DropDownPicker} />
  <Field name="item2" component={DropDownPicker} />
<FormSection>

Enrique