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}]

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}}.