chore: use ternaries instead of && in JSX (#90)

Author: MichaelDeBoey

.eslintrc.js

@@ -23,5 +23,7 @@ module.exports = {
         "newlines-between": "always",
       },
     ],
+
+    "react/jsx-no-leaked-render": [WARN, { validStrategies: ["ternary"] }],
   },
 };

_official-blog-tutorial/app/routes/join.tsx

@@ -108,11 +108,11 @@ export default function Join() {
                 aria-describedby="email-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.email && (
+              {actionData?.errors?.email ? (
                 <div className="pt-1 text-red-700" id="email-error">
                   {actionData.errors.email}
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
 
@@ -134,11 +134,11 @@ export default function Join() {
                 aria-describedby="password-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.password && (
+              {actionData?.errors?.password ? (
                 <div className="pt-1 text-red-700" id="password-error">
                   {actionData.errors.password}
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
 

_official-blog-tutorial/app/routes/login.tsx

@@ -101,11 +101,11 @@ export default function LoginPage() {
                 aria-describedby="email-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.email && (
+              {actionData?.errors?.email ? (
                 <div className="pt-1 text-red-700" id="email-error">
                   {actionData.errors.email}
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
 
@@ -127,11 +127,11 @@ export default function LoginPage() {
                 aria-describedby="password-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.password && (
+              {actionData?.errors?.password ? (
                 <div className="pt-1 text-red-700" id="password-error">
                   {actionData.errors.password}
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
 

_official-blog-tutorial/app/routes/notes/new.tsx

@@ -69,11 +69,11 @@ export default function NewNotePage() {
             }
           />
         </label>
-        {actionData?.errors?.title && (
+        {actionData?.errors?.title ? (
           <Alert className="pt-1 text-red-700" id="title-error">
             {actionData.errors.title}
           </Alert>
-        )}
+        ) : null}
       </div>
 
       <div>
@@ -90,11 +90,11 @@ export default function NewNotePage() {
             }
           />
         </label>
-        {actionData?.errors?.body && (
+        {actionData?.errors?.body ? (
           <Alert className="pt-1 text-red-700" id="body-error">
             {actionData.errors.body}
           </Alert>
-        )}
+        ) : null}
       </div>
 
       <div className="text-right">

_official-tutorial/app/routes/contacts.$contactId.tsx

@@ -56,19 +56,17 @@ export default function Contact() {
           <Favorite contact={contact} />
         </h1>
 
-        {contact.twitter && (
-          <p>
+        {contact.twitter ? <p>
             <a
               target="_blank"
               href={`https://twitter.com/${contact.twitter}`}
               rel="noreferrer"
             >
               {contact.twitter}
             </a>
-          </p>
-        )}
+          </p> : null}
 
-        {contact.notes && <p>{contact.notes}</p>}
+        {contact.notes ? <p>{contact.notes}</p> : null}
 
         <div>
           <Form action="edit">

client-side-validation/app/root.tsx

@@ -180,9 +180,9 @@ export default function App() {
               <button>Submit</button>
             </div>
           </form>
-          {actionData?.message && (
+          {actionData?.message ? (
             <div className="result">{actionData.message}</div>
-          )}
+          ) : null}
         </div>
         <ScrollRestoration />
         <Scripts />

combobox-resource-route/app/routes/index.tsx

@@ -41,11 +41,11 @@ export default function Index() {
           />
 
           {/* Add a nice spinner when the fetcher is loading */}
-          {langs.state === "loading" && <Spinner />}
+          {langs.state === "loading" ? <Spinner /> : null}
         </div>
 
         {/* Only show the popover if we have results */}
-        {langs.data && langs.data.length > 0 && (
+        {langs.data && langs.data.length > 0 ? (
           <ComboboxPopover>
             <ComboboxList>
               {langs.data.map((lang, index) => (
@@ -55,13 +55,13 @@ export default function Index() {
               ))}
             </ComboboxList>
           </ComboboxPopover>
-        )}
+        ) : null}
       </Combobox>
       <p>
         <button type="submit">Submit</button>{" "}
-        {searchParams.has("lang") && (
+        {searchParams.has("lang") ? (
           <span>You submitted: {searchParams.get("lang")}</span>
-        )}
+        ) : null}
       </p>
     </Form>
   );

firebase/app/routes/join.tsx

@@ -46,7 +46,7 @@ export default function Login() {
   return (
     <div>
       <h1>Join</h1>
-      {actionData?.error && <p>{actionData.error}</p>}
+      {actionData?.error ? <p>{actionData.error}</p> : null}
       <Form method="post">
         <input
           style={{ display: "block" }}

firebase/app/routes/login.tsx

@@ -93,9 +93,7 @@ export default function Login() {
   return (
     <div>
       <h1>Login</h1>
-      {(clientAction?.error || actionData?.error) && (
-        <p>{clientAction?.error || actionData?.error}</p>
-      )}
+      {(clientAction?.error || actionData?.error) ? <p>{clientAction?.error || actionData?.error}</p> : null}
       <form method="post" onSubmit={handleSubmit}>
         <input
           style={{ display: "block" }}

gdpr-cookie-consent/app/root.tsx

@@ -45,7 +45,7 @@ export default function App() {
       </head>
       <body>
         <Outlet />
-        {!track && (
+        {track ? null : (
           <div
             style={{
               backgroundColor: "#ccc",