A component for rendering and editing arrays š React Final Form
npm install react-final-form-arraysš° Wanna get paid the big bucks writing React? Take this quiz and get offers from top tech companies! š°
---





---
``bash`
npm install --save react-final-form-arrays react-final-form final-form final-form-arrays
or
`bash`
yarn add react-final-form-arrays react-final-form final-form final-form-arrays
š React Final Form Arrays provides a way to render arrays in š React Final
Form.
`jsx
import { Form, Field } from 'react-final-form'
import arrayMutators from 'final-form-arrays'
import { FieldArray } from 'react-final-form-arrays'
const MyForm = () => (
Table of Contents
- Examples
- Simple Example
- React Beautiful DnD Example
- Rendering
- API
-
FieldArray : React.ComponentType
- useFieldArray
- version: string
- Types
- FieldArrayProps
- children?: ((props: FieldArrayRenderProps) => React.Node) | React.Node
- component?: React.ComponentType
- name: string
- render?: (props: FieldArrayRenderProps) => React.Node
- defaultValue?: any
- initialValue?: any
- isEqual?: (allPreviousValues: Array
- subscription?: FieldSubscription
- [validate?: (value: ?any[], allValues: Object) => ?any](#validate-value-any-allvalues-object--any)
- FieldArrayRenderProps
- fields.forEach: (iterator: (name: string, index: number) => void) => void
- fields.insert: (index: number, value: any) => void
- [fields.map: (iterator: (name: string, index: number) => any) => any[]](#fieldsmap-iterator-name-string-index-number--any--any)
- fields.move: (from: number, to: number) => void
- fields.name: string
- fields.pop: () => any
- fields.push: (value: any) => void
- fields.remove: (index: number) => any
- fields.shift: () => any
- fields.swap: (indexA: number, indexB: number) => void
- fields.update: (index: number, value: any) => void
- fields.unshift: (value: any) => void
- [fields.value: any[]](#fieldsvalue-any)
- meta.active?: boolean
- meta.data: Object
- meta.dirty?: boolean
- meta.error?: any
- meta.initial?: any
- meta.invalid?: boolean
- meta.pristine?: boolean
- meta.submitError?: any
- meta.submitFailed?: boolean
- meta.submitSucceeded?: boolean
- meta.touched?: boolean
- meta.valid?: boolean
- meta.visited?: booleanExamples
$3
Demostrates how to use
to render an array of inputs, as well as
use push, pop, and remove mutations.$3
Demostrates how to integrate the simple example with react-beautiful-dnd
Rendering
There are three ways to tell
what to render:| Method | How it is rendered |
| ------------------------------- | --------------------------------------------------------- |
|
component prop | return React.createElement(this.props.component, props) |
| render prop | return this.props.render(props) |
| a render function as children | return this.props.children(props) |API
The following can be imported from
react-final-form-arrays.$3
FieldArrayProps and renders an
array of fields$3
The
useFieldArray hook takes two parameters, the first is the name of the field, and the second is an optional object that looks just like FieldArrayProps, except without the name. It returns an object just like FieldArrayRenderProps.useFieldArray is used interally inside FieldArray.$3
The current used version of š React Final Form Arrays.
---
Types
$3
. You must
provide one of the ways to render: component, render, or children.####
children?: ((props: FieldArrayRenderProps) => React.Node) | React.NodeFieldArrayRenderProps, as well as any non-API props
passed into the component.####
component?: React.ComponentTypeFieldArrayRenderProps as
props, as well as any non-API props passed into the component.####
name: stringThe name of your field array.
####
render?: (props: FieldArrayRenderProps) => React.NodeFieldArrayRenderProps, as well as any non-API props
passed into the component.####
defaultValue?: anyā ļø You probably want
initialValue! ā ļø_Before using this prop, read and understand the š Final Form documentation on
initialValue and defaultValue!_####
initialValue?: anyinitialValue####
isEqual?: (allPreviousValues: ArrayA function that can be used to compare two arrays of values (before and after every change) and calculate pristine/dirty checks. Defaults to a function that will
=== check each element of the array.####
subscription?: FieldSubscriptionFieldSubscription
that selects of all the items of
FieldState that you
wish to update for. If you don't pass a subscription prop, it defaults to
_all_ of FieldState.####
validate?: (value: ?any[], allValues: Object) => ?anyA function that takes the field value, and all the values of the form and
returns an error if the array value is invalid, or
undefined if the value is
valid.$3
provides to
your render function or component. This object is divided into a fields object
that mimics an iterable (e.g. it has map() and forEach() and length), and
meta data about the field array. Keep in mind that **the values in meta are
dependent on you having subscribed to them** with the
subscription prop####
fields.forEach: (iterator: (name: string, index: number) => void) => voidIterates through all of the names of the fields in the field array in bracket
format, e.g.
foo[0], foo[1], foo[2].####
fields.insert: (index: number, value: any) => voidA function to insert a value into any arbitrary index of the array.
####
fields.map: (iterator: (name: string, index: number) => any) => any[]Iterates through all of the names of the fields in the field array in bracket
format, e.g.
foo[0], foo[1], foo[2], and collects the results of the
iterator function. You will use this in almost every implementation.####
fields.move: (from: number, to: number) => voidA function to move a value from one index to another. Useful for drag-and-drop
reordering.
####
fields.name: stringThe name of the field array.
####
fields.pop: () => anyA function to remove a value from the end of the array. The value will be
returned.
####
fields.push: (value: any) => voidA function to add a value to the end of the array.
####
fields.remove: (index: number) => anyA function to remove a value from an arbitrary index of the array.
####
fields.shift: () => anyA function to remove a value from the beginning of the array. The value will be
returned.
####
fields.swap: (indexA: number, indexB: number) => voidA function to swap two values in the array.
####
fields.update: (index: number, value: any) => voidUpdates a value of the specified index of the array field.
####
fields.unshift: (value: any) => voidA function to add a value to the beginning of the array.
####
fields.value: any[]The value of the array. Should be treated as readonly.
####
meta.active?: booleanactive.####
meta.data: Objectdata.####
meta.dirty?: booleandirty.####
meta.error?: anyerror.####
meta.initial?: anyinitial.####
meta.invalid?: booleaninvalid.####
meta.pristine?: booleanpristine.####
meta.submitError?: anysubmitError.####
meta.submitFailed?: booleansubmitFailed.####
meta.submitSucceeded?: booleansubmitSucceeded.####
meta.touched?: booleantouched.####
meta.valid?: booleanvalid.####
meta.visited?: booleanvisited`.