Fix Formstate.Nested in Formstate.List

Using a nested property in a list would result in a "Cannot read property
'brand' of undefined" error when adding new items to the list.

packages/react-form-state/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 <!-- ## Unreleased -->
 
+### Fixed
+
+- `FormState.Nested` no longer breaks when used in a `FormState.List` and an item is added [#698](https://github.com/Shopify/quilt/pull/698)
+
 ## [0.10.0]
 
 ### Changed

packages/react-form-state/src/components/Nested.tsx

@@ -23,7 +23,8 @@ export default class Nested<Fields> extends React.PureComponent<
     const innerFields: FieldDescriptors<Fields> = mapObject(
       value,
       (value, fieldPath) => {
-        const initialFieldValue = initialValue[fieldPath];
+        const initialFieldValue = initialValue && initialValue[fieldPath];
+
         return {
           value,
           onBlur,

packages/react-form-state/src/components/tests/List.test.tsx

@@ -6,7 +6,7 @@ import {trigger} from '@shopify/enzyme-utilities';
 // eslint-disable-next-line shopify/strict-component-boundaries
 import {Input} from '../../tests/components';
 import {lastCallArgs} from '../../tests/utilities';
-import FormState from '../..';
+import FormState, { arrayUtils } from '../..';
 
 describe('<FormState.List />', () => {
   it('passes form state into child function for each index of the given array', () => {
@@ -339,4 +339,52 @@ describe('<FormState.List />', () => {
     expect(updatedFields.title.value).toBe(newTitle);
     expect(updatedFields.department.value).toBe(newDepartment);
   });
+
+  it.only('does not raise an exceptions when list items are nested', () => {
+      const variants = [
+        {
+          product: 
+            {
+              title: faker.commerce.department(),
+            },
+        },
+      ];
+
+      const renderSpy = jest.fn(({title}) => {
+        return (<Input label="title" {...title} />);
+      });
+
+      let variantsRef;
+      mount(
+        <FormState initialValues={{variants}}>
+          {({fields}) => {
+            variantsRef = fields.variants;
+            return (<>
+              <FormState.List field={fields.variants}>
+                {nestedFields => (
+                  <FormState.Nested field={nestedFields.product}>
+                    {renderSpy}
+                  </FormState.Nested>
+                )}
+              </FormState.List>
+            </>
+          );}
+          }
+        </FormState>,
+      );
+
+      const newVariants = arrayUtils.push(variantsRef.value, 
+        {
+          product: {
+            title: 'newProduct',
+          },
+        }
+      )
+      variantsRef.onChange(newVariants);
+      const calls = renderSpy.mock.calls;
+      const originalRenderCount = variants.length;
+      const rerenderedCount = originalRenderCount + 1;
+      expect(calls).toHaveLength(originalRenderCount + rerenderedCount);
+
+    });
 });