react-final-form-arrays
Advanced tools
A component for rendering and editing arrays š React Final Form
The react-final-form-arrays package is an extension for react-final-form that provides utilities for managing arrays in forms. It simplifies the process of adding, removing, and manipulating array fields within a form, making it easier to handle dynamic form fields.
Adding and Removing Fields
This feature allows you to dynamically add and remove fields in a form. The code sample demonstrates how to use the FieldArray component to manage an array of 'friends' with first and last names.
```jsx
import React from 'react';
import { FieldArray } from 'react-final-form-arrays';
import { Form, Field } from 'react-final-form';
const MyForm = () => (
<Form
onSubmit={formValues => console.log(formValues)}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<FieldArray name="friends">
{({ fields }) => (
<div>
{fields.map((name, index) => (
<div key={name}>
<Field name={`${name}.firstName`} component="input" placeholder="First Name" />
<Field name={`${name}.lastName`} component="input" placeholder="Last Name" />
<span onClick={() => fields.remove(index)}>-</span>
</div>
))}
<button type="button" onClick={() => fields.push({})}>Add Friend</button>
</div>
)}
</FieldArray>
<button type="submit">Submit</button>
</form>
)}
/>
);
export default MyForm;
```Conditional Rendering of Array Fields
This feature allows for conditional rendering of array fields. The code sample shows how to conditionally render a remove button for each friend field, only if the index is greater than 0.
```jsx
import React from 'react';
import { FieldArray } from 'react-final-form-arrays';
import { Form, Field } from 'react-final-form';
const MyForm = () => (
<Form
onSubmit={formValues => console.log(formValues)}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<FieldArray name="friends">
{({ fields }) => (
<div>
{fields.map((name, index) => (
<div key={name}>
<Field name={`${name}.firstName`} component="input" placeholder="First Name" />
<Field name={`${name}.lastName`} component="input" placeholder="Last Name" />
{index > 0 && <span onClick={() => fields.remove(index)}>-</span>}
</div>
))}
<button type="button" onClick={() => fields.push({})}>Add Friend</button>
</div>
)}
</FieldArray>
<button type="submit">Submit</button>
</form>
)}
/>
);
export default MyForm;
```Formik is a popular form library for React that also provides utilities for managing arrays in forms. It offers a similar FieldArray component that allows for dynamic addition and removal of fields. Compared to react-final-form-arrays, Formik is more feature-rich and has a larger community, but it may be more complex to set up and use.
React Hook Form is another form library for React that provides a useFieldArray hook for managing array fields. It is known for its performance and simplicity, leveraging React hooks for a more modern approach. Compared to react-final-form-arrays, React Hook Form is more lightweight and has a simpler API, but it may lack some of the advanced features provided by react-final-form.
š° 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 Final Form.
import { Form, Field } from 'react-final-form'
import arrayMutators from 'final-form-arrays'
import { FieldArray } from 'react-final-form-arrays'
const MyForm = () => (
<Form
onSubmit={onSubmit}
mutators={{
// potentially other mutators could be merged here
...arrayMutators
}}
validate={validate}
render={({ handleSubmit, pristine, invalid }) => (
<form onSubmit={handleSubmit}>
<FieldArray name="customers">
{({ fields }) => (
<div>
{fields.map((name, index) => (
<div key={name}>
<div>
<label>First Name</label>
<Field name={`${name}.firstName`} component="input" />
</div>
<div>
<label>Last Name</label>
<Field name={`${name}.lastName`} component="input" />
</div>
<button type="button" onClick={() => fields.remove(index)}>
Remove
</button>
</div>
))}
<button
type="button"
onClick={() => fields.push({ firstName: '', lastName: '' })}
>
Add
</button>
</div>
)}
</FieldArray>
</form>
)}
/>
)
FieldArrayProps
children?: ((props: FieldArrayRenderProps) => React.Node) | React.Nodecomponent?: React.ComponentType<FieldArrayRenderProps>name: stringrender?: (props: FieldArrayRenderProps) => React.NodedefaultValue?: anyinitialValue?: anyisEqual?: (allPreviousValues: Array<any>, allNewValues: Array<any>) => booleansubscription?: FieldSubscriptionvalidate?: (value: ?any[], allValues: Object) => ?anyFieldArrayRenderProps
fields.forEach: (iterator: (name: string, index: number) => void) => voidfields.insert: (index: number, value: any) => voidfields.map: (iterator: (name: string, index: number) => any) => any[]fields.move: (from: number, to: number) => voidfields.name: stringfields.pop: () => anyfields.push: (value: any) => voidfields.remove: (index: number) => anyfields.shift: () => anyfields.swap: (indexA: number, indexB: number) => voidfields.update: (index: number, value: any) => voidfields.unshift: (value: any) => voidmeta.active?: booleanmeta.data: Objectmeta.dirty?: booleanmeta.error?: anymeta.initial?: anymeta.invalid?: booleanmeta.pristine?: booleanmeta.submitError?: anymeta.submitFailed?: booleanmeta.submitSucceeded?: booleanmeta.touched?: booleanmeta.valid?: booleanmeta.visited?: booleanDemostrates how to use <FieldArray/> to render an array of inputs, as well as
use push, pop, and remove mutations.
Demostrates how to integrate the simple example with react-beautiful-dnd
There are three ways to tell <FieldArray/> 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) |
The following can be imported from react-final-form-arrays.
FieldArray : React.ComponentType<FieldArrayProps>A component that takes FieldArrayProps and renders an
array of fields
useFieldArrayThe 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.
version: stringThe current used version of š React Final Form Arrays.
FieldArrayPropsThese are props that you pass to
<FieldArray/>. You must
provide one of the ways to render: component, render, or children.
children?: ((props: FieldArrayRenderProps) => React.Node) | React.NodeA render function that is given
FieldArrayRenderProps, as well as any non-API props
passed into the <FieldArray/> component.
component?: React.ComponentType<FieldArrayRenderProps>A component that is given FieldArrayRenderProps as
props, as well as any non-API props passed into the <FieldArray/> component.
name: stringThe name of your field array.
render?: (props: FieldArrayRenderProps) => React.NodeA render function that is given
FieldArrayRenderProps, as well as any non-API props
passed into the <FieldArray/> component.
defaultValue?: anyā ļø You probably want initialValue! ā ļø
Before using this prop, read and understand the š Final Form documentation on initialValue and defaultValue!
initialValue?: anySee the š Final Form docs on initialValue
isEqual?: (allPreviousValues: Array<any>, allNewValues: Array<any>) => booleanA 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?: FieldSubscriptionA
FieldSubscription
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.
FieldArrayRenderPropsThese are the props that
<FieldArray/> 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?: booleanSee the š Final Form docs on active.
meta.data: ObjectSee the š Final Form docs on data.
meta.dirty?: booleanSee the š Final Form docs on dirty.
meta.error?: anySee the š Final Form docs on error.
meta.initial?: anySee the š Final Form docs on initial.
meta.invalid?: booleanSee the š Final Form docs on invalid.
meta.pristine?: booleanSee the š Final Form docs on pristine.
meta.submitError?: anySee the š Final Form docs on submitError.
meta.submitFailed?: booleanSee the š Final Form docs on submitFailed.
meta.submitSucceeded?: booleanSee the š Final Form docs on submitSucceeded.
meta.touched?: booleanSee the š Final Form docs on touched.
meta.valid?: booleanSee the š Final Form docs on valid.
meta.visited?: booleanFAQs
A component for rendering and editing arrays š React Final Form
The npm package react-final-form-arrays receives a total of 164,257 weekly downloads. As such, react-final-form-arrays popularity was classified as popular.
We found that react-final-form-arrays demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.