refactor: use ternaries rather than && in JSX (#1948)

remix-run · Feb 14, 2022 · 898379e · 898379e
1 parent 2c11add
commit 898379e
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 24 deletions.
diff --git a/docs/api/remix.md b/docs/api/remix.md
@@ -1693,7 +1693,7 @@ export default function Home() {
 
   return (
     <div>
-      {showBanner && (
+      {showBanner ? (
         <div>
           <Link to="/sale">Don't miss our sale!</Link>
           <Form method="post">
@@ -1705,7 +1705,7 @@ export default function Home() {
             <button type="submit">Hide</button>
           </Form>
         </div>
-      )}
+      ) : null}
       <h1>Welcome!</h1>
     </div>
   );
@@ -1986,7 +1986,7 @@ export default function Login() {
 
   return (
     <div>
-      {error && <div className="error">{error}</div>}
+      {error ? <div className="error">{error}</div> : null}
       <form method="POST">
         <div>
           <p>Please sign in</p>
@@ -2284,7 +2284,7 @@ Now we can read the message in a loader.
 
 <docs-info>You must commit the session whenever you read a `flash`. This is different than you might be used to where some type of middleware automatically sets the cookie header for you.</docs-info>
 
-```js
+```jsx
 import { Meta, Links, Scripts, Outlet, json } from "remix";
 
 import { getSession, commitSession } from "./sessions";
@@ -2316,7 +2316,9 @@ export default function App() {
         <Links />
       </head>
       <body>
-        {message && <div className="flash">{message}</div>}
+        {message ? (
+          <div className="flash">{message}</div>
+        ) : null}
         <Outlet />
         <Scripts />
       </body>

diff --git a/docs/guides/styling.md b/docs/guides/styling.md
@@ -693,9 +693,9 @@ Here's some sample code to show how you might use Styled Components with Remix (
            <Outlet />
            <ScrollRestoration />
            <Scripts />
-           {process.env.NODE_ENV === "development" && (
+           {process.env.NODE_ENV === "development" ? (
              <LiveReload />
-           )}
+           ) : null}
          </body>
        </html>
      );

diff --git a/docs/pages/technical-explanation.md b/docs/pages/technical-explanation.md
@@ -121,9 +121,9 @@ export default function Projects() {
         <input name="title" />
         <button type="submit">Create New Project</button>
       </Form>
-      {actionData?.errors && (
+      {actionData?.errors ? (
         <ErrorMessages errors={actionData.errors} />
-      )}
+      ) : null}
 
       {/* outlets render the nested child routes 
           that match the URL deeper than this route,
@@ -192,11 +192,11 @@ export default function Projects() {
         </button>
       </Form>
 
-      {actionData?.errors && (
+      {actionData?.errors ? (
         <FadeIn>
           <ErrorMessages errors={actionData.errors} />
         </FadeIn>
-      )}
+      ) : null}
 
       <Outlet />
     </div>

diff --git a/examples/image-resize/app/components/image.tsx b/examples/image-resize/app/components/image.tsx
@@ -8,9 +8,15 @@ export interface ImageProps {
 }
 export function Image({ src, width, height, fit, ...other }: ImageProps) {
   const query = new URLSearchParams();
-  width && query.set("w", width.toString());
-  height && query.set("h", height.toString());
-  fit && query.set("fit", fit);
+  if (width) {
+    query.set("w", width.toString());
+  }
+  if (height) {
+    query.set("h", height.toString());
+  }
+  if (fit) {
+    query.set("fit", fit);
+  }
   return (
     <img
       src={`/assets/resize/${src}?${query.toString()}`}

diff --git a/examples/remix-auth-auth0/app/routes/index.tsx b/examples/remix-auth-auth0/app/routes/index.tsx
@@ -18,7 +18,7 @@ export default function Screen() {
 
   return (
     <Form method="post" action="/auth0">
-      {error && <div>{error.message}</div>}
+      {error ? <div>{error.message}</div> : null}
       <button>Sign In with Auth0</button>
     </Form>
   );

diff --git a/examples/remix-auth-form/app/routes/login.tsx b/examples/remix-auth-form/app/routes/login.tsx
@@ -27,7 +27,7 @@ export default function Screen() {
 
   return (
     <Form method="post">
-      {error && <div>{error.message}</div>}
+      {error ? <div>{error.message}</div> : null}
       <div>
         <label htmlFor="email">Email</label>
         <input

diff --git a/examples/remix-auth-github/app/routes/index.tsx b/examples/remix-auth-github/app/routes/index.tsx
@@ -20,7 +20,7 @@ export default function Screen() {
 
   return (
     <Form method="post" action="/auth/github">
-      {error && <div>{error.message}</div>}
+      {error ? <div>{error.message}</div> : null}
       <button>Sign In with GitHub</button>
     </Form>
   );

diff --git a/examples/route-modal/app/routes/invoices/add.tsx b/examples/route-modal/app/routes/invoices/add.tsx
@@ -41,7 +41,7 @@ export default function Add() {
 
   return (
     <Dialog isOpen={true} aria-label="Add invoice" onDismiss={onDismiss}>
-      {transition.state === "submitting" && <div>Saving...</div>}
+      {transition.state === "submitting" ? <div>Saving...</div> : null}
       <h3>Add invoice</h3>
       <Form
         method="post"

diff --git a/examples/search-input/app/routes/index.tsx b/examples/search-input/app/routes/index.tsx
@@ -105,25 +105,25 @@ export default function Index() {
         </div>
       ) : (
         <>
-          {data.status === "emptySearch" && (
+          {data.status === "emptySearch" ? (
             <p className="info">
               Start searching...{" "}
               <span role="img" aria-label="point up emoji">
                 ☝️
               </span>
             </p>
-          )}
+          ) : null}
 
-          {data.status === "noResults" && (
+          {data.status === "noResults" ? (
             <p className="info">
               Ooops, no results{" "}
               <span role="img" aria-label="crying emoji">
                 😢
               </span>
             </p>
-          )}
+          ) : null}
 
-          {data.status === "resultsFound" && (
+          {data.status === "resultsFound" ? (
             <div className="results">
               {data.items.map(item => (
                 <a
@@ -137,7 +137,7 @@ export default function Index() {
                 </a>
               ))}
             </div>
-          )}
+          ) : null}
         </>
       )}
     </div>