fieldArray

A decorator for 0-n fields. Supplies you with functions for manipulating the array of fields.

Note: it's just a pseudo-array - it has a similar, but limited API. See below for the list of available functions.

Props

name: string

• The name of the array. Required.

form: string

• The name of your form. Required if you didn't use the Form component.

Note: you have to create the form yourself via the addForm action if you decide to supply the form prop directly.

Supplied props

Your component will receive a fields object as a prop with several functions and length attached to it.

length: number

• The length of the array

map: (id: string, number: index) => any

• Maps the field array, with each element being an id of it's array position

push: () => void

• Pushes a field to the end of the array.

pop: () => void

• Pops a field, losing the last field.

unshift: () => void

• Unshifts a field to the beginning of the array.

shift: () => void

• Shifts the array, losing the first field.

insert: (index: number) => void

• Inserts a field after the index.

remove: (index: number) => void

• Removes a field at the index.

swap: (index1: number, index2: number) => void

• Swaps fields at the specified indexes.

move: (from: number, to: number) => void

• Moves a field from one index to the other.

Usage

All fieldArray does is that it generates index ids for your components. There are two ways to use them.

Single field

Simply provide the generated id as a name for your field components:

const Flat = props => (
  <div className="FlatArray">
    {props.fields.map(id => (
      <InputField key={id} name={id} />
    ))}
  </div>
);

const FlatArray = fieldArray(Flat);

Then when retrieving your values, they will be in a flat array: ['John', 'Doe'].

Member fields

Separate the generated id with the member with a . and pass it as a name to your field components:

const Member = props => (
  <div className="MemberArray">
    {props.fields.map(id => (
      <div className="MemberArray-item" key={id}>
        <InputField name={`${id}.name`} />
        <InputField name={`${id}.surname`} />
      </div>
    ))}
  </div>
);

const MemberArray = fieldArray(Member);

Your data will then be an array of objects with the given members:

[{
  name: 'John',
  surname: 'Doe',
},{
  name: 'Jack',
  surname: 'Parrot',
}]

Example

Mounting an array with push and pop functions as buttons:

import { Form, field, fieldArray } from 'redux-forms-react`;

// field
const Input = props => (
  <input type="text" id={props.input.name} {...props.input} />
);

const InputField = field(Input);

// fieldArray
const Inputs = props => (
  <div className="Inputs">
    {props.fields.map(id => (
      <InputField key={id} name={id} />
    ))}
    <button className="Inputs-btn" onClick={props.fields.push}>
      Add field
    </button>
    <button className="Inputs-btn" onClick={props.fields.pop}>
      Remove field
    </button>
  </div>
);

const InputsArray = fieldArray(Inputs);

// Form
const MyForm = props => (
  <Form name="user" onSubmit={props.onSubmit}>
    <div className="Input">
      <label htmlFor="username">Username</label>
      <InputField name="username" />
    </div>
    <InputsArray name="hobbies">
    <button type="submit">Submit</button>
  </Form>
);

export default MyForm;

Your data will then look something like this:

{
  username: 'Boris',
  hobbies: ['deadlifts', 'food', 'dovahspeak'],
}