Enforce conditional JSX style (#440)

* Let's see how far we get with this * trigger build? * nodder
mui · May 18, 2022 · 3221854 · 3221854
1 parent 77becf5
commit 3221854
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -60,6 +60,13 @@ module.exports = {
               message:
                 '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
             },
+            // See https://github.com/jsx-eslint/eslint-plugin-react/issues/2073
+            {
+              selector:
+                ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='&&']",
+              message:
+                "Please use `condition ? <Jsx /> : null`. Otherwise, there is a chance of rendering '0' instead of '' in some cases. Context: https://stackoverflow.com/q/53048037",
+            },
           ],
         },
       };

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageOptionsPanel.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageOptionsPanel.tsx
@@ -35,7 +35,7 @@ export default function PageOptionsPanel() {
         <Divider variant="middle" sx={{ alignSelf: 'stretch' }} />
         <Typography variant="subtitle1">Page State:</Typography>
         <UrlQueryEditor pageNodeId={pageNodeId} />
-        {DEPRECATED && <DerivedStateEditor />}
+        {DEPRECATED ? <DerivedStateEditor /> : null}
         <QueryStateEditor />
       </Stack>
     </div>