From 1f258a9395eb2a5a03c7a2acbeafd859e9d79d13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Mon, 14 Feb 2022 04:01:12 +0100 Subject: [PATCH] refactor: use ternaries rather than && in JSX --- docs/api/remix.md | 12 +++++++----- docs/guides/styling.md | 4 ++-- docs/pages/technical-explanation.md | 8 ++++---- examples/image-resize/app/components/image.tsx | 12 +++++++++--- examples/remix-auth-auth0/app/routes/index.tsx | 2 +- examples/remix-auth-form/app/routes/login.tsx | 2 +- examples/remix-auth-github/app/routes/index.tsx | 2 +- examples/route-modal/app/routes/invoices/add.tsx | 2 +- examples/search-input/app/routes/index.tsx | 12 ++++++------ 9 files changed, 32 insertions(+), 24 deletions(-) diff --git a/docs/api/remix.md b/docs/api/remix.md index b5d987de0a6..1ecf0738c78 100644 --- a/docs/api/remix.md +++ b/docs/api/remix.md @@ -1693,7 +1693,7 @@ export default function Home() { return (
- {showBanner && ( + {showBanner ? (
Don't miss our sale!
@@ -1705,7 +1705,7 @@ export default function Home() {
- )} + ) : null}

Welcome!

); @@ -1986,7 +1986,7 @@ export default function Login() { return (
- {error &&
{error}
} + {error ?
{error}
: null}

Please sign in

@@ -2284,7 +2284,7 @@ Now we can read the message in a loader. 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. -```js +```jsx import { Meta, Links, Scripts, Outlet, json } from "remix"; import { getSession, commitSession } from "./sessions"; @@ -2316,7 +2316,9 @@ export default function App() { - {message &&
{message}
} + {message ? ( +
{message}
+ ) : null} diff --git a/docs/guides/styling.md b/docs/guides/styling.md index 420f6c63d48..7eb62f52e72 100644 --- 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 ( - {process.env.NODE_ENV === "development" && ( + {process.env.NODE_ENV === "development" ? ( - )} + ) : null} ); diff --git a/docs/pages/technical-explanation.md b/docs/pages/technical-explanation.md index 6aa03e2bc46..ca2a8175a4f 100644 --- a/docs/pages/technical-explanation.md +++ b/docs/pages/technical-explanation.md @@ -121,9 +121,9 @@ export default function Projects() { - {actionData?.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() { - {actionData?.errors && ( + {actionData?.errors ? ( - )} + ) : null}
diff --git a/examples/image-resize/app/components/image.tsx b/examples/image-resize/app/components/image.tsx index 9829761df5c..7f30e2f8453 100644 --- 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 ( - {error &&
{error.message}
} + {error ?
{error.message}
: null} ); diff --git a/examples/remix-auth-form/app/routes/login.tsx b/examples/remix-auth-form/app/routes/login.tsx index f8ce7227f49..b98eb3a437e 100644 --- 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 (
- {error &&
{error.message}
} + {error ?
{error.message}
: null}
- {error &&
{error.message}
} + {error ?
{error.message}
: null} ); diff --git a/examples/route-modal/app/routes/invoices/add.tsx b/examples/route-modal/app/routes/invoices/add.tsx index 6c78913714b..62bae4131c6 100644 --- 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 ( - {transition.state === "submitting" &&
Saving...
} + {transition.state === "submitting" ?
Saving...
: null}

Add invoice

) : ( <> - {data.status === "emptySearch" && ( + {data.status === "emptySearch" ? (

Start searching...{" "} ☝️

- )} + ) : null} - {data.status === "noResults" && ( + {data.status === "noResults" ? (

Ooops, no results{" "} 😢

- )} + ) : null} - {data.status === "resultsFound" && ( + {data.status === "resultsFound" ? (
{data.items.map(item => ( ))}
- )} + ) : null} )}