Field array with one field at initial

Question

I am trying to use the concept of field array because in my app a user should be able to fill multiple value for same kind of field. I could do as per redux-form field array example, however, in an example there is no initial field we have to first click on add member and then only we can have the field to fill the value but i need one field initially and then add further field if user wants to.

I tried from the redux-form example but its not allowing me to input the value at all. Here is the demo

https://codesandbox.io/s/n47qr2pvzl

The format of that field value should be like this

general: {
 general_information: {
  members: [
   {
     name: ''
   },
   {
     name: ''
   }
]
}
} 

Here is the code

const renderMembers = ({ fields, meta: { touched, error, submitFailed } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>
        Add Member
      </button>
      {(touched || submitFailed) && 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}.name`}
          type="text"
          component={renderField}
          label="Name"
        />
      </li>
    ))}
  </ul>
);

const FieldArraysForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="general.general_information.clubName"
        type="text"
        component={renderField}
        label="Club Name"
      />
      <Field
        name="general.general_information.members.name"
        type="text"
        component={renderField}
        label="Name"
      />
      <FieldArray
        name="general.general_information.members"
        component={renderMembers}
      />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

Answer 1

According to Redux-Form, we can set the initial fields by specifying it like (in your case):

export default reduxForm({
  form: "fieldArrays", // a unique identifier for this form
  validate,
  initialValues: {"general": {
    "general_information": {
      "members": [
        {}
      ]
    }
  }
  }
})(FieldArraysForm);

Here is the live demo

Hope it helps :)