Fix Formstate.Nested in Formstate.List

[axelerator]

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.

The error looks something like this:

Cannot read property 'brand' of undefined
TypeError: 
    at eval (webpack:///./node_modules/@shopify/react-form-state/dist/components/Nested.js?:33:49)
    at eval (webpack:///./node_modules/@shopify/react-form-state/dist/utilities.js?:9:28)
    at Array.reduce (<anonymous>)
    at Object.mapObject (webpack:///./node_modules/@shopify/react-form-state/dist/utilities.js?:7:34)
    at Nested.render (webpack:///./node_modules/@shopify/react-form-state/dist/components/Nested.js?:32:39)

This may also address #571

Minimal broken example of broken

function App() {
  return (
    <AppProvider>
    <div className="App">
      <header className="App-header">
        <FormState
        initialValues={{
          variants: [
            {
              description: {
                brand: 'brandName1',
              },
            },
          ],
        }}
      >
        {({fields}) => {
          const {variants} = fields;
          function addVariant() {
            variants.onChange(
              arrayUtils.push(variants.value, {
                description: {
                  brand: 'brandName3',
                },
              }),
            );
          }
          return (
            <form>
              <div>
                  <div>
                    <FormState.List field={fields.variants}>
                      {(fields) => {
                        return (
                          <FormState.Nested field={fields.description}>
                            {(nestedFields) => {
                              return (
                                <TextField
                                  label=""
                                  {...nestedFields.brand}
                                />
                              );
                            }}
                          </FormState.Nested>
                        );
                      }}
                    </FormState.List>

                    <ButtonGroup>
                      <Button onClick={addVariant}>Add variant</Button>
                    </ButtonGroup>
                  </div>
              </div>
            </form>
          );
        }}
      </FormState>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    </AppProvider>
  );
}

[lemonmade]

I think I need a bit of an explanation as to how this is hit, and I'd like @TheMallen to review.

[lemonmade]

Would probably be a bit cleaner to do const initialFieldValue = initialValue && initialValue[fieldPath]

[lemonmade]

I am a bit confused how this could ever happen if the field type is not an optional type; that is, in the example case you provided, why is initialValue undefined? It looks like initialValue should be {brand: 'brandName1'}, no?

[axelerator]

I am not sure - but I think it's du to the fact that an added list item is not present in the initial data passed to the FormState.

[lemonmade]

In the example you provided (very helpful btw), the initial values are definitely present. I wonder if this is really more of a bug in List not passing down the value to the render prop correctly? Can you log out what fields.description is?

[axelerator]

The error happens only when you add a new element with the Add variant button via arrayUtils to the list - this new, second item is not present in the data initially passed to <FormState initialValues=.., which has only one element in the variants list

[marutypes]

Thanks for the PR :)

Code change makes sense (though I agree with chris's point about clarity), can we add a test to make sure this doesn't regress and update the CHANGELOG.md before this ships?

[marina101]

Looks good!

[axelerator]

I added a test and a changelog entry