diff --git a/shells/dev/app/EditableProps/EditableProps.js b/shells/dev/app/EditableProps/EditableProps.js
index 13a3d97077..c48a78dc8c 100644
--- a/shells/dev/app/EditableProps/EditableProps.js
+++ b/shells/dev/app/EditableProps/EditableProps.js
@@ -47,9 +47,10 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
         </button>
       </li>
       <li>
-        <button onClick={handleUpdateReducerClick}>
-          Reducer state: {JSON.stringify(data, null, 2)}
-        </button>
+        Reducer state: foo "{data.foo}", bar "{data.bar}"
+      </li>
+      <li>
+        <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
       </li>
     </Fragment>
   );
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index a48f883f86..a6d4351431 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -221,7 +221,7 @@ export function EditableValue({
     type = 'number';
   }
 
-  let inputValue = value;
+  let inputValue = value == null ? '' : value;
   if (hasPendingChanges) {
     inputValue = editableValue == null ? '' : editableValue;
   }