diff --git a/frontend/src/js/component/wb-json-editor.js b/frontend/src/js/component/wb-json-editor.js
index 0fe39b8..52f6011 100644
--- a/frontend/src/js/component/wb-json-editor.js
+++ b/frontend/src/js/component/wb-json-editor.js
@@ -3,6 +3,41 @@ import WBJsonViewer from 'wb-json-viewer';
 import WBAccordion from 'wb-accordion';
 import WBDialog from 'wb-dialog';
 
+class WbJsonEditorDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+  }
+
+  render({ name, onChange }, { editValue, parseError }) {
+    return (
+      <WBDialog title={ 'Edit ' + name } ref={ this.dialogRef }
+        accept={ () => {
+          onChange(JSON.parse(editValue));
+        } }
+        canAccept={ () => {
+          try { JSON.parse(editValue) }
+          catch (exc) { this.setState({ parseError: exc.message }); return false; }
+          return true;
+        } }>
+        <div>
+          <textarea class="form-control wb-json-editor" value={ editValue } rows="10"
+            onChange={ e => this.setState({ editValue: e.target.value }) } />
+          { parseError ? (
+            <div class="alert alert-danger mt-2" role="alert">
+              { parseError }
+            </div>
+          ) : null }
+        </div>
+      </WBDialog>
+    );
+  }
+
+  show() {
+    this.dialogRef.current.show();
+  }
+}
+
 class WBJsonEditor extends Component {
   constructor(...args) {
     super(...args);
@@ -12,33 +47,16 @@ class WBJsonEditor extends Component {
   render({ app, name, value, stringify, pretty, onChange }, { editValue, parseError }) {
     return (
       <div>
-        <WBDialog title={ 'Edit ' + name } ref={ this.dialogRef }
-          accept={ () => {
-            onChange(JSON.parse(editValue));
-          } }
-          canAccept={ () => {
-            try { JSON.parse(editValue) }
-            catch (exc) { this.setState({ parseError: exc.message }); return false; }
-            return true;
-          } }>
-          <div>
-            <textarea class="form-control wb-json-editor" value={ editValue } rows="10"
-              onChange={ e => this.setState({ editValue: e.target.value }) } />
-            { parseError ? (
-              <div class="alert alert-danger mt-2" role="alert">
-                { parseError }
-              </div>
-            ) : null }
-          </div>
-        </WBDialog>
+        <WbJsonEditorDialog name={ name } onChange={ onChange } ref={ this.dialogRef } />
         <WBAccordion names={ [ name ] } extraHeaderUi={ [ (
           <button class="btn btn-link px-0" title="Edit"
             onclick={ () => {
-              this.setState({ parseError: null,
+              const dlg = this.dialogRef.current;
+              dlg.setState({ parseError: null,
                   editValue: stringify ?
                   pretty ? JSON.stringify(value, null, 2)
                   : JSON.stringify(value) : value });
-              this.dialogRef.current.show();
+              dlg.show();
             } }>
             <i class="fas fa-edit text-secondary" />
           </button>