Fixed an issue where the React Form would error when recieving a custom message (#183)

# Pull Request

## 📖 Description

<!--- Provide some background and a description of your work. -->
Custom messages cause the Form to error due to a previous refactor, this has been fixed in this change which should not look at dataDictionary or any other data structures internals unless the message is one known to contain those.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.

change/@microsoft-fast-tooling-react-08fd9c15-0422-4b76-ac54-885de3bfb22c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed an issue where the React Form would error when recieving a custom message",
+  "packageName": "@microsoft/fast-tooling-react",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/fast-tooling-react/src/form/form.spec.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import Adapter from "enzyme-adapter-react-16";
 import "../__tests__/mocks/match-media";
-import { configure, mount, render, shallow } from "enzyme";
+import { configure, mount } from "enzyme";
 import { Form, ModularForm } from "./";
 import { FormProps } from "./form.props";
 import {
+    CustomMessageIncomingOutgoing,
     DataType,
     InitializeMessageOutgoing,
     MessageSystem,
@@ -12,18 +13,7 @@ import {
     NavigationConfig,
     Register,
 } from "@microsoft/fast-tooling";
-
-import {
-    arraysSchema as arraySchema,
-    childrenSchema,
-    invalidDataSchema,
-    objectsSchema as objectSchema,
-} from "../__tests__/schemas";
-
-import { ControlConfig, ControlType, StandardControlPlugin } from "./templates";
-import { TextareaControl } from "./controls/control.textarea";
-import { CheckboxControl } from "./controls/control.checkbox";
-import { ButtonControl } from "./controls/control.button";
+import { ControlType, StandardControlPlugin } from "./templates";
 
 /*
  * Configure Enzyme
@@ -40,6 +30,38 @@ describe("Form", () => {
             mount(<Form {...formProps} />);
         }).not.toThrow();
     });
+    test("should not throw when a custom message is sent", () => {
+        const fastMessageSystem: MessageSystem = new MessageSystem({
+            webWorker: "",
+            dataDictionary: [
+                {
+                    "": {
+                        schemaId: "foo",
+                        data: {},
+                    },
+                },
+                "",
+            ],
+            schemaDictionary: {
+                foo: {
+                    id: "foo",
+                    type: "object",
+                },
+            },
+        });
+
+        mount(<Form {...formProps} messageSystem={fastMessageSystem} />);
+
+        expect(() => {
+            fastMessageSystem["register"].forEach((registeredItem: Register) => {
+                registeredItem.onMessage({
+                    data: {
+                        type: MessageSystemType.custom,
+                    } as CustomMessageIncomingOutgoing<{}>,
+                } as any);
+            });
+        }).not.toThrow();
+    });
     test("should register the component with a message system", () => {
         const fastMessageSystem: MessageSystem = new MessageSystem({
             webWorker: "",

packages/fast-tooling-react/src/form/form.tsx

@@ -162,19 +162,8 @@ class Form extends React.Component<
      * Handle messages from the message system
      */
     private handleMessageSystem = (e: MessageEvent): void => {
-        const schemaDictionary: SchemaDictionary = e.data.schemaDictionary;
-        let dataDictionary: DataDictionary<unknown> = e.data.dataDictionary;
-        let navigationDictionary: NavigationConfigDictionary =
-            e.data.navigationDictionary;
-        let activeDictionaryId: string = e.data.activeDictionaryId;
-        let activeNavigationConfigId: string = e.data.activeNavigationConfigId;
-        let validationErrors: Validation = e.data.validation;
-        let schema: any =
-            schemaDictionary[dataDictionary[0][activeDictionaryId].schemaId];
-        let data: any = dataDictionary[0][activeDictionaryId].data;
-        let navigation: NavigationConfig = navigationDictionary[0][activeDictionaryId];
-        let options = e.data.options;
         let setState = false;
+        let activeDictionaryId: string = e.data.activeDictionaryId;
 
         switch (e.data.type) {
             case MessageSystemType.initialize:
@@ -190,6 +179,20 @@ class Form extends React.Component<
         }
 
         if (setState) {
+            const schemaDictionary: SchemaDictionary = e.data.schemaDictionary;
+            let dataDictionary: DataDictionary<unknown> = e.data.dataDictionary;
+            let navigationDictionary: NavigationConfigDictionary =
+                e.data.navigationDictionary;
+            let activeDictionaryId: string = e.data.activeDictionaryId;
+            let activeNavigationConfigId: string = e.data.activeNavigationConfigId;
+            let validationErrors: Validation = e.data.validation;
+            let schema: any =
+                schemaDictionary[dataDictionary[0][activeDictionaryId].schemaId];
+            let data: any = dataDictionary[0][activeDictionaryId].data;
+            let navigation: NavigationConfig =
+                navigationDictionary[0][activeDictionaryId];
+            let options = e.data.options;
+
             this.setState({
                 schemaDictionary,
                 dataDictionary,