diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 54e8a8c667428..681e7e61561a4 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -125,6 +125,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   const isEditMode = database !== null;
+  const defaultExtra =
+    '{\n  "metadata_params": {},\n  "engine_params": {},' +
+    '\n  "metadata_cache_timeout": {},\n  "schemas_allowed_for_csv_upload": [] \n}';
 
   // Database fetch logic
   const {
@@ -588,11 +591,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             <div className="input-container">
               <textarea
                 name="extra"
-                value={db ? db.extra || '' : ''}
-                placeholder={
-                  '{\n  "metadata_params": {},\n  "engine_params": {},' +
-                  '\n  "metadata_cache_timeout": {},\n  "schemas_allowed_for_csv_upload": [] \n}'
-                }
+                value={(db && db.extra) ?? defaultExtra}
                 onChange={onTextChange}
               />
             </div>