Merge pull request #1363 from ethereum/react-warning

Fix react warning in settings tab

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -71,39 +71,47 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     }
   }
 
-  const generalConfig = () => (
-    <div className="$border-top">
-      <div className="card-body pt-3 pb-2">
-        <h6 className="card-title">General settings</h6>
-        <div className="mt-2 custom-control custom-checkbox mb-1">
-          <input onChange={onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" className="custom-control-input" name="contractMetadata" checked = { props.config.get('settings/generate-contract-metadata') }/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/generate-contract-metadata')}`} data-id="settingsTabGenerateContractMetadataLabel" htmlFor="generatecontractmetadata">{generateContractMetadataText}</label>
-        </div>
-        <div className="fmt-2 custom-control custom-checkbox mb-1">
-          <input onChange={onchangeOption} className="custom-control-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox" name="ethereumVM" checked={ props.config.get('settings/always-use-vm') }/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/always-use-vm')}`} htmlFor="alwaysUseVM">{ethereunVMText}</label>
-        </div>
-        <div className="mt-2 custom-control custom-checkbox mb-1">
-          <input id="editorWrap" className="custom-control-input" type="checkbox" onChange={textWrapEvent} checked = { props.config.get('settings/text-wrap')}/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/text-wrap')}`} htmlFor="editorWrap">{wordWrapText}</label>
-        </div>
-        <div className="custom-control custom-checkbox mb-1">
-          <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked = { props.config.get('settings/personal-mode')}/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/personal-mode')}`} htmlFor="personal">
-            <i className="fas fa-exclamation-triangle text-warning" aria-hidden="true"></i> <span>   </span>
-            <span>   </span>{enablePersonalModeText} {warnText}
-          </label>
-        </div>
-        <div className="custom-control custom-checkbox mb-1">
-          <input onChange={onchangeMatomoAnalytics} id="settingsMatomoAnalytics" type="checkbox" className="custom-control-input" checked={ props.config.get('settings/matomo-analytics')}/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/matomo-analytics')}`} htmlFor="settingsMatomoAnalytics">
-            <span>{matomoAnalytics}</span>
-            <a href="https://medium.com/p/66ef69e14931/" target="_blank"> Analytics in Remix IDE</a> <span>&</span> <a target="_blank" href="https://matomo.org/free-software">Matomo</a>
-          </label>
+  const generalConfig = () => {
+    const isMetadataChecked = props.config.get('settings/generate-contract-metadata') || false
+    const isEthereumVMChecked = props.config.get('settings/always-use-vm') || false
+    const isEditorWrapChecked = props.config.get('settings/text-wrap') || false
+    const isPersonalChecked = props.config.get('settings/personal-mode') || false
+    const isMatomoChecked = props.config.get('settings/matomo-analytics') || false
+
+    return (
+      <div className="$border-top">
+        <div className="card-body pt-3 pb-2">
+          <h6 className="card-title">General settings</h6>
+          <div className="mt-2 custom-control custom-checkbox mb-1">
+            <input onChange={onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" className="custom-control-input" name="contractMetadata" checked = { isMetadataChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/generate-contract-metadata')}`} data-id="settingsTabGenerateContractMetadataLabel" htmlFor="generatecontractmetadata">{generateContractMetadataText}</label>
+          </div>
+          <div className="fmt-2 custom-control custom-checkbox mb-1">
+            <input onChange={onchangeOption} className="custom-control-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox" name="ethereumVM" checked={ isEthereumVMChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/always-use-vm')}`} htmlFor="alwaysUseVM">{ethereunVMText}</label>
+          </div>
+          <div className="mt-2 custom-control custom-checkbox mb-1">
+            <input id="editorWrap" className="custom-control-input" type="checkbox" onChange={textWrapEvent} checked = { isEditorWrapChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/text-wrap')}`} htmlFor="editorWrap">{wordWrapText}</label>
+          </div>
+          <div className="custom-control custom-checkbox mb-1">
+            <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked = { isPersonalChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/personal-mode')}`} htmlFor="personal">
+              <i className="fas fa-exclamation-triangle text-warning" aria-hidden="true"></i> <span>   </span>
+              <span>   </span>{enablePersonalModeText} {warnText}
+            </label>
+          </div>
+          <div className="custom-control custom-checkbox mb-1">
+            <input onChange={onchangeMatomoAnalytics} id="settingsMatomoAnalytics" type="checkbox" className="custom-control-input" checked={ isMatomoChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/matomo-analytics')}`} htmlFor="settingsMatomoAnalytics">
+              <span>{matomoAnalytics}</span>
+              <a href="https://medium.com/p/66ef69e14931/" target="_blank"> Analytics in Remix IDE</a> <span>&</span> <a target="_blank" href="https://matomo.org/free-software">Matomo</a>
+            </label>
+          </div>
         </div>
       </div>
-    </div>
-  )
+    )
+  }
 
   const saveToken = () => {
     saveTokenToast(props.config, dispatchToast, tokenValue)