comment limiter fieldArray field.ray de redux-form à 3

Question

comment limiter champ FieldArray de redux-form.push Devrait atteindre un maximum de trois. En utilisant Redux-de l'exemple la 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> 

)

Answer 1

Vous pouvez passer le gestionnaire conditionnel:

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