Adding multiple <Fields /> in redux-form

Question

I should have both question input and answer input in a <Field/>. Because of that redux-form docs tells me to use <Fields/>.

<Fields names={['question1', 'answer1']}
    component={this.renderInputGroupField} />
<Fields names={['question2', 'answer2']}
    component={this.renderInputGroupField} />
<Fields names={['question3', 'answer3']}
    component={this.renderInputGroupField} />

rendering fields with this

renderInputGroupField(fields){
    return(
        <div className="form-group d-block">
            <div className="form-group input-group">
                <select className="form-select" >
                    <option>Multiple-Choice</option>
                    <option>Open-Ended</option>
                </select>
                <input {...fields.question1.input}
                    type="text"
                    className="form-input"
                    placeholder="Type your question..."/>
            </div>
            <div className="form-group">
                <input {...fields.answer1.input}
                    type="text"
                    className="form-input"
                    placeholder="Comma-separated answer choices" />
            </div>
        </div>
    );
}

To make renderInputGroupField work, I should add {...fields.answer1.input} into <input /> as above. Here is the problem. Names that are passed into fields are different and I can't find a way to change ...fields.answer1.input to ...fields.answer2.input dynamically.

I am not sure if I was able to explain it properly. Thanks for your help.

callmeroot · Accepted Answer · 2018-03-23 17:28:52Z

1

So, it seems you want to use the renderInputGroupField as a reusable component. Quickly testing, it looks like redux-form also sends back that list of names you originally gave it. You should be able to access those properties of fields that you listed in the names array using their index in that array, like below.

return(
  <div className="form-group d-block">
    <div className="form-group input-group">
      <select className="form-select">
        <option>Multiple-Choice</option>
        <option>Open-Ended</option>
      </select>
      <input {...fields[fields.names[0]].input}
             type="text"
             className="form-input"
             placeholder="Type your question..."/>
    </div>
    <div className="form-group">
      <input {...fields[fields.names[1]].input}
             type="text"
             className="form-input"
             placeholder="Comma-separated answer choices" />
    </div>
  </div>
);

answered Mar 23, 2018 at 17:28

callmeroot

5604 silver badges15 bronze badges

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

4 Comments

cyonder Over a year ago

Thank you so much. I have tried fields.names[0] to target the name but looks like the way I was writing, was wrong. Your answer fixed the problem.

callmeroot Over a year ago

Glad I could help!

cyonder Over a year ago

I thought about putting entire questions under question 'q' object. So, in fields I'll be passing names={['q.question1', 'q.answer1']}, how does it change the {...fields[fields.names[0]].input}. Because names[0] now contains 'q.question1' and some how q. should be cut out to target the input.

callmeroot Over a year ago

You can change it to {...fields.q[fields.names[0].split('.')[1]]} for question and {...fields.q[fields.names[1].split('.')[1]]} for answer.

Collectives™ on Stack Overflow

Adding multiple <Fields /> in redux-form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related