Repository files navigation

💰Wanna get paid the big bucks writing React?Take this quiz and get offers from top tech companies! 💰

npm install --save react-final-form-arrays react-final-form final-form final-form-arrays

or

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 FinalForm.

import{Form,Field}from'react-final-form'importarrayMutatorsfrom'final-form-arrays'import{FieldArray}from'react-final-form-arrays'constMyForm=()=>(<FormonSubmit={onSubmit}mutators={{// potentially other mutators could be merged here      ...arrayMutators}}validate={validate}render={({ handleSubmit, pristine, invalid})=>(<formonSubmit={handleSubmit}><FieldArrayname="customers">{({ fields})=>(<div>{fields.map((name,index)=>(<divkey={name}><div><label>First Name</label><Fieldname={`${name}.firstName`}component="input"/></div><div><label>Last Name</label><Fieldname={`${name}.lastName`}component="input"/></div><buttontype="button"onClick={()=>fields.remove(index)}>                    Remove</button></div>))}<buttontype="button"onClick={()=>fields.push({firstName:'',lastName:''})}>                Add</button></div>)}</FieldArray></form>)}/>)

• Examples
  • Simple Example
  • React Beautiful DnD Example
• Rendering
• API
  • FieldArray : React.ComponentType<FieldArrayProps>
  • useFieldArray
  • version: string
• Types
  • FieldArrayProps
    • children?: ((props: FieldArrayRenderProps) => React.Node) | React.Node
    • component?: React.ComponentType<FieldArrayRenderProps>
    • name: string
    • render?: (props: FieldArrayRenderProps) => React.Node
    • defaultValue?: any
    • initialValue?: any
    • isEqual?: (allPreviousValues: Array<any>, allNewValues: Array<any>) => boolean
    • subscription?: FieldSubscription
    • 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[]
    • 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[]
    • 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?: boolean

Demostrates how to use<FieldArray/> to render an array of inputs, as well asusepush,pop, andremove mutations.

Demostrates how to integrate the simple example withreact-beautiful-dnd

There are three ways to tell<FieldArray/> what to render:

The following can be imported fromreact-final-form-arrays.

A component that takesFieldArrayProps and renders anarray of fields

TheuseFieldArray hook takes two parameters, the first is the name of the field, and the second is an optional object that looks just likeFieldArrayProps, except without the name. It returns an object just likeFieldArrayRenderProps.

useFieldArray is used interally insideFieldArray.

The current used version of 🏁 React Final Form Arrays.

These are props that you pass to<FieldArray/>. You mustprovide one of the ways to render:component,render, orchildren.

A render function that is givenFieldArrayRenderProps, as well as any non-API propspassed into the<FieldArray/> component.

A component that is givenFieldArrayRenderProps asprops, as well as any non-API props passed into the<FieldArray/> component.

The name of your field array.

A render function that is givenFieldArrayRenderProps, as well as any non-API propspassed into the<FieldArray/> component.

⚠️ You probably wantinitialValue!⚠️

Before using this prop, read and understand the 🏁 Final Form documentation oninitialValue anddefaultValue!

See the 🏁 Final Form docs oninitialValue

A 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.

AFieldSubscriptionthat selects of all the items ofFieldState that youwish to update for. If you don't pass asubscription prop, it defaults toall ofFieldState.

A function that takes the field value, and all the values of the form andreturns an error if the array value is invalid, orundefined if the value isvalid.

These are the props that<FieldArray/> provides toyour render function or component. This object is divided into afields objectthat mimics an iterable (e.g. it hasmap() andforEach() andlength), andmeta data about the field array. Keep in mind thatthe values inmeta aredependent on you having subscribed to them with thesubscription prop

Iterates through all of the names of the fields in the field array in bracketformat, e.g.foo[0],foo[1],foo[2].

A function to insert a value into any arbitrary index of the array.

Iterates through all of the names of the fields in the field array in bracketformat, e.g.foo[0],foo[1],foo[2], and collects the results of theiterator function. You will use this in almost every implementation.

A function to move a value from one index to another. Useful for drag-and-dropreordering.

The name of the field array.

A function to remove a value from the end of the array. The value will bereturned.

A function to add a value to the end of the array.

A function to remove a value from an arbitrary index of the array.

A function to remove a value from the beginning of the array. The value will bereturned.

A function to swap two values in the array.

Updates a value of the specified index of the array field.

A function to add a value to the beginning of the array.

The value of the array. Should be treated as readonly.

See the 🏁 Final Form docs onactive.

See the 🏁 Final Form docs ondata.

See the 🏁 Final Form docs ondirty.

See the 🏁 Final Form docs onerror.

See the 🏁 Final Form docs oninitial.

See the 🏁 Final Form docs oninvalid.

See the 🏁 Final Form docs onpristine.

See the 🏁 Final Form docs onsubmitError.

See the 🏁 Final Form docs onsubmitFailed.

See the 🏁 Final Form docs onsubmitSucceeded.

See the 🏁 Final Form docs ontouched.

See the 🏁 Final Form docs onvalid.

See the 🏁 Final Form docs onvisited.