Add replace array helper (jaredpalmer#520)

src/FieldArray.tsx

@@ -28,6 +28,10 @@ export interface ArrayHelpers {
   insert: (index: number, value: any) => void;
   /** Curried fn to insert an element at a given index into the array */
   handleInsert: (index: number, value: any) => () => void;
+  /** Imperatively replace a value at an index of an array  */
+  replace: (index: number, value: any) => void;
+  /** Curried fn to replace an element at a given index into the array */
+  handleReplace: (index: number, value: any) => () => void;
   /** Imperatively add an element to the beginning of an array and return its length */
   unshift: (value: any) => number;
   /** Curried fn to add an element to the beginning of an array */
@@ -67,6 +71,12 @@ export const insert = (array: any[], index: number, value: any) => {
   return copy;
 };
 
+export const replace = (array: any[], index: number, value: any) => {
+  const copy = [...(array || [])];
+  copy[index] = value;
+  return copy;
+};
+
 export class FieldArray extends React.Component<FieldArrayConfig, {}> {
   static defaultProps = {
     validateOnChange: true,
@@ -151,6 +161,16 @@ export class FieldArray extends React.Component<FieldArrayConfig, {}> {
 
   handleInsert = (index: number, value: any) => () => this.insert(index, value);
 
+  replace = (index: number, value: any) =>
+    this.updateArrayField(
+      (array: any[]) => replace(array, index, value),
+      false,
+      false
+    );
+
+  handleReplace = (index: number, value: any) => () =>
+    this.replace(index, value);
+
   unshift = (value: any) => {
     let arr = [];
     this.updateArrayField(
@@ -218,13 +238,15 @@ export class FieldArray extends React.Component<FieldArrayConfig, {}> {
       swap: this.swap,
       move: this.move,
       insert: this.insert,
+      replace: this.replace,
       unshift: this.unshift,
       remove: this.remove,
       handlePush: this.handlePush,
       handlePop: this.handlePop,
       handleSwap: this.handleSwap,
       handleMove: this.handleMove,
       handleInsert: this.handleInsert,
+      handleReplace: this.handleReplace,
       handleUnshift: this.handleUnshift,
       handleRemove: this.handleRemove,
     };

test/FieldArray.test.tsx

@@ -182,6 +182,34 @@ describe('<FieldArray />', () => {
     });
   });
 
+  describe('props.replace()', () => {
+    it('should replace a value at given index of field array', () => {
+      let formikBag: any;
+      let arrayHelpers: any;
+      ReactDOM.render(
+        <TestForm
+          render={(props: any) => {
+            formikBag = props;
+            return (
+              <FieldArray
+                name="friends"
+                render={arrayProps => {
+                  arrayHelpers = arrayProps;
+                  return null;
+                }}
+              />
+            );
+          }}
+        />,
+        node
+      );
+
+      arrayHelpers.replace(1, 'brian');
+      const expected = ['jared', 'brian', 'brent'];
+      expect(formikBag.values.friends).toEqual(expected);
+    });
+  });
+
   describe('props.unshift()', () => {
     it('should add a value to start of field array and return its length', () => {
       let formikBag: any;