diff --git a/www/react-base/src/components/RawData/RawData.test.tsx b/www/react-base/src/components/RawData/RawData.test.tsx
index d66038960403..09a5c6e86736 100644
--- a/www/react-base/src/components/RawData/RawData.test.tsx
+++ b/www/react-base/src/components/RawData/RawData.test.tsx
@@ -49,6 +49,8 @@ describe('RawData component', function() {
       float: 123.4,
       boolean: true,
       array: [321, "string", true],
+      null: null,
+      undefined: undefined,
     }
 
     assertRenderSnapshot(obj);
@@ -61,6 +63,8 @@ describe('RawData component', function() {
       float: 123.4,
       boolean: true,
       array: observable([321, "string", true]),
+      null: null,
+      undefined: undefined,
     });
 
     assertRenderSnapshot(obj);
@@ -73,6 +77,8 @@ describe('RawData component', function() {
         {int: 123},
         {float: 123.4},
         {boolean: true},
+        {null: null},
+        {undefined: undefined},
       ],
     };
 
@@ -86,6 +92,8 @@ describe('RawData component', function() {
         {int: 123},
         {float: 123.4},
         {boolean: true},
+        {null: null},
+        {undefined: undefined},
       ],
     };
 
@@ -99,6 +107,8 @@ describe('RawData component', function() {
         observable({int: 123}),
         observable({float: 123.4}),
         observable({boolean: true}),
+        observable({null: null}),
+        observable({undefined: undefined}),
       ],
     });
 
diff --git a/www/react-base/src/components/RawData/RawData.tsx b/www/react-base/src/components/RawData/RawData.tsx
index d8e1d0fa8ac9..ab0c7fc785ce 100644
--- a/www/react-base/src/components/RawData/RawData.tsx
+++ b/www/react-base/src/components/RawData/RawData.tsx
@@ -52,10 +52,13 @@ export const RawData = ({data}: RawDataProps) => {
   }
 
   const renderDataElement = (value: any) => {
-    if (!isObjectRaw(value) && !isArrayOfObjectsRaw(value)) {
-      return <dd>{value === null ? "null" : value.toString()}&nbsp;</dd>;
+    if (value === null) {
+      return <dd>{"null"}&nbsp;</dd>;
     }
-    if (isArrayOfObjectsRaw(value)) {
+    else if (value === undefined) {
+      return <dd>{"undefined"}&nbsp;</dd>;
+    }
+    else if (isArrayOfObjectsRaw(value)) {
       return (
         <dd>
           <ArrowExpander isExpanded={isExpanded} setIsExpanded={setIsExpanded}/>
@@ -63,7 +66,7 @@ export const RawData = ({data}: RawDataProps) => {
         </dd>
       );
     }
-    if (isObjectRaw(value)) {
+    else if (isObjectRaw(value)) {
       return (
         <dd>
           <ArrowExpander isExpanded={isExpanded} setIsExpanded={setIsExpanded}/>
@@ -71,6 +74,8 @@ export const RawData = ({data}: RawDataProps) => {
         </dd>
       )
     }
+
+    return <dd>{value.toString()}&nbsp;</dd>;
   }
 
   const renderElements = () => {
diff --git a/www/react-base/src/components/RawData/__snapshots__/RawData.test.tsx.snap b/www/react-base/src/components/RawData/__snapshots__/RawData.test.tsx.snap
index 82b298ae8272..61ac67777219 100644
--- a/www/react-base/src/components/RawData/__snapshots__/RawData.test.tsx.snap
+++ b/www/react-base/src/components/RawData/__snapshots__/RawData.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`RawData component object with array of objects 1`] = `
         />
       </svg>
       <span>
-        [{"str":"string"},{"int":123},{"float":123.4},{"boolean":true}]
+        [{"str":"string"},{"int":123},{"float":123.4},{"boolean":true},{"null":null},{}]
       </span>
     </dd>
   </div>
@@ -139,6 +139,40 @@ exports[`RawData component object with array of objects expanded 1`] = `
             </div>
           </dl>
         </li>
+        <li>
+          <dl
+            className="dl-horizontal"
+          >
+            <div
+              className="bb-raw-data-key-value"
+            >
+              <dt>
+                null
+              </dt>
+              <dd>
+                null
+                 
+              </dd>
+            </div>
+          </dl>
+        </li>
+        <li>
+          <dl
+            className="dl-horizontal"
+          >
+            <div
+              className="bb-raw-data-key-value"
+            >
+              <dt>
+                undefined
+              </dt>
+              <dd>
+                undefined
+                 
+              </dd>
+            </div>
+          </dl>
+        </li>
       </ul>
     </dd>
   </div>
@@ -204,6 +238,28 @@ exports[`RawData component observable object 1`] = `
        
     </dd>
   </div>
+  <div
+    className="bb-raw-data-key-value"
+  >
+    <dt>
+      null
+    </dt>
+    <dd>
+      null
+       
+    </dd>
+  </div>
+  <div
+    className="bb-raw-data-key-value"
+  >
+    <dt>
+      undefined
+    </dt>
+    <dd>
+      undefined
+       
+    </dd>
+  </div>
 </dl>
 `;
 
@@ -239,7 +295,7 @@ exports[`RawData component observable object with array of objects 1`] = `
         />
       </svg>
       <span>
-        [{"str":"string"},{"int":123},{"float":123.4},{"boolean":true}]
+        [{"str":"string"},{"int":123},{"float":123.4},{"boolean":true},{"null":null},{}]
       </span>
     </dd>
   </div>
@@ -305,5 +361,27 @@ exports[`RawData component simple object 1`] = `
        
     </dd>
   </div>
+  <div
+    className="bb-raw-data-key-value"
+  >
+    <dt>
+      null
+    </dt>
+    <dd>
+      null
+       
+    </dd>
+  </div>
+  <div
+    className="bb-raw-data-key-value"
+  >
+    <dt>
+      undefined
+    </dt>
+    <dd>
+      undefined
+       
+    </dd>
+  </div>
 </dl>
 `;