how to limit redux-form's fieldArray field.push to 3

Question

how to limit redux-form's fieldArray field.push Should max out at three. Using redux-from example version 6.8.0

 const renderMembers = ({ fields, meta: { touched, error } }) => (
 <ul>
  <li>
  <button type="button" onClick={() => fields.push({})}>Add Member</button>
  {touched && error && <span>{error}</span>}
  </li>
  {fields.map((member, index) =>
  <li key={index}>
    <button
      type="button"
      title="Remove Member"
      onClick={() => fields.remove(index)}/>
    <h4>Member #{index + 1}</h4>
    <Field
      name={`${member}.firstName`}
      type="text"
      component={renderField}
      label="First Name"/>
    <Field
      name={`${member}.lastName`}
      type="text"
      component={renderField}
      label="Last Name"/>
    <FieldArray name={`${member}.hobbies`} component={renderHobbies}/>
  </li>
  )}
</ul>

)

Sagiv b.g · Accepted Answer · 2017-10-17 20:30:24Z

4

You can pass the handler conditionally:

onClick={() => fields.length <= 3 && fields.push({})}

answered Oct 17, 2017 at 20:30

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

Collectives™ on Stack Overflow

how to limit redux-form's fieldArray field.push to 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related