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

that might not help me in this case because the input might change — ShocKwav3_
– ShocKwav3_, Commented Mar 15, 2018 at 15:04

Igor Alemasow · Accepted Answer · 2018-03-15 15:41:44Z

13

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

answered Mar 15, 2018 at 15:41

Igor Alemasow

4,9692 gold badges32 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aekansh Kansal Over a year ago

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

Hai Alaluf · Accepted Answer · 2022-10-23 09:02:38Z

0

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>

answered Oct 23, 2022 at 9:02

Hai Alaluf

1,0579 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related