Repository: grommet/grommet (JavaScript)

Issue:
FormField triggers errors when it has null as a child
<!--- Provide a general summary of the issue in the Title above -->

### Expected Behavior
We have code similar to this (without the explicit false)
```
<FormField>
        <TextInput />
        {false && <Text>foobar</Text>}
</FormField>
```

In v2.35.0 this would render fine with just the TextInput inside the form field

<!--- Tell us what should happen -->

### Actual Behavior

In v2.36.0 and v2.36.1 this code results in an error: 'Cannot read properties of null (reading 'props')'
It is failing around this line in FormField: https://github.com/grommet/grommet/blob/74f30449d7cb6d602066267f821a870a5edf9112/src/js/components/FormField/FormField.js#L220

<!--- Tell us what happens instead -->

### URL, screen shot, or Codepen exhibiting the issue

<!--
  -- Here's a Codesandbox template that serves as a nice starting point
  -- for demonstrating an issue: https://codesandbox.io/s/m7mml8l0zj
  -->
https://codesandbox.io/p/sandbox/determined-noyce-yjhfjg?file=%2Fsrc%2FApp.js
### Steps to Reproduce

1. Have a FormField with a null or false child

### Your Environment

<!--- Include as many relevant details about the environment you experienced the bug in -->

- Grommet version: v2.36.0 and v.2.36.1 (verified issue is present in both these versions)
- Browser Name and version: Chrome
- Operating System and version (desktop or mobile): Mac



Discussion:

Patch:
diff --git a/src/js/components/FormField/FormField.js b/src/js/components/FormField/FormField.js
index e2708c8caad..01cbc6eb3e4 100644
--- a/src/js/components/FormField/FormField.js
+++ b/src/js/components/FormField/FormField.js
@@ -217,8 +217,8 @@ const FormField = forwardRef(
       if (children) {
         Children.map(children, (child) => {
           if (
-            (child.props?.readOnly === true ||
-              child.props?.readOnlyCopy === true) &&
+            (child?.props?.readOnly === true ||
+              child?.props?.readOnlyCopy === true) &&
             child.type &&
             ('TextInput'.indexOf(child.type.displayName) !== -1 ||
               'DateInput'.indexOf(child.type.displayName) !== -1)


Test patch:
diff --git a/src/js/components/FormField/__tests__/FormField-test.js b/src/js/components/FormField/__tests__/FormField-test.js
index dff37ffc8c2..36785ee1ee2 100644
--- a/src/js/components/FormField/__tests__/FormField-test.js
+++ b/src/js/components/FormField/__tests__/FormField-test.js
@@ -13,6 +13,7 @@ import { Form } from '../../Form';
 import { Grommet } from '../../Grommet';
 import { TextInput } from '../../TextInput';
 import { TextArea } from '../../TextArea';
+import { Text } from '../../Text';
 
 const CustomFormField = styled(FormField)`
   font-size: 40px;
@@ -572,4 +573,16 @@ describe('FormField', () => {
     );
     expect(mockFocus).toHaveBeenCalledTimes(1);
   });
+
+  test('Field with null as child', () => {
+    const { container } = render(
+      <Grommet>
+        <FormField label="Label">
+          <TextInput />
+          {false && <Text>foobar</Text>}
+        </FormField>
+      </Grommet>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/src/js/components/FormField/__tests__/__snapshots__/FormField-test.js.snap b/src/js/components/FormField/__tests__/__snapshots__/FormField-test.js.snap
index 9b131bd9572..ac5510085c2 100644
--- a/src/js/components/FormField/__tests__/__snapshots__/FormField-test.js.snap
+++ b/src/js/components/FormField/__tests__/__snapshots__/FormField-test.js.snap
@@ -1,5 +1,144 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`FormField Field with null as child 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-bottom: 12px;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  border-bottom: solid 1px rgba(0,0,0,0.33);
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c2 {
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.c5 {
+  box-sizing: border-box;
+  font-size: inherit;
+  font-family: inherit;
+  border: none;
+  -webkit-appearance: none;
+  background: transparent;
+  color: inherit;
+  width: 100%;
+  padding: 11px;
+  font-weight: 600;
+  margin: 0;
+  border: 1px solid rgba(0,0,0,0.33);
+  border-radius: 4px;
+  outline: none;
+  border: none;
+}
+
+.c5::-webkit-input-placeholder {
+  color: #AAAAAA;
+}
+
+.c5::-moz-placeholder {
+  color: #AAAAAA;
+}
+
+.c5:-ms-input-placeholder {
+  color: #AAAAAA;
+}
+
+.c5::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.c5::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+.c5:-moz-placeholder,
+.c5::-moz-placeholder {
+  opacity: 1;
+}
+
+.c4 {
+  position: relative;
+  width: 100%;
+}
+
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media only screen and (max-width:768px) {
+  .c1 {
+    margin-bottom: 6px;
+  }
+}
+
+@media only screen and (max-width:768px) {
+  .c3 {
+    border-bottom: solid 1px rgba(0,0,0,0.33);
+  }
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1 "
+  >
+    <label
+      class="c2"
+    >
+      Label
+    </label>
+    <div
+      class="c3 FormField__FormFieldContentBox-sc-m9hood-1"
+    >
+      <div
+        class="c4"
+      >
+        <input
+          autocomplete="off"
+          class="c5"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`FormField abut 1`] = `
 .c1 {
   display: -webkit-box;