Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from Feb 14, 2022
+32 −24
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 7 additions & 5 deletions docs/api/remix.md
View file
Open in desktop
Expand Up @@ -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">
Expand All @@ -1705,7 +1705,7 @@ export default function Home() {
<button type="submit">Hide</button>
</Form>
</div>
)}
) : null}
<h1>Welcome!</h1>
</div>
);
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions docs/guides/styling.md
View file
Open in desktop
Expand Up @@ -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>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/pages/technical-explanation.md
View file
Open in desktop
Expand Up @@ -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,
Expand Down Expand Up @@ -192,11 +192,11 @@ export default function Projects() {
</button>
</Form>

{actionData?.errors && (
{actionData?.errors ? (
<FadeIn>
<ErrorMessages errors={actionData.errors} />
</FadeIn>
)}
) : null}

<Outlet />
</div>
Expand Down
12 changes: 9 additions & 3 deletions examples/image-resize/app/components/image.tsx
View file
Open in desktop
Expand Up @@ -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()}`}
Expand Down
2 changes: 1 addition & 1 deletion examples/remix-auth-auth0/app/routes/index.tsx
View file
Open in desktop
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion examples/remix-auth-form/app/routes/login.tsx
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion examples/remix-auth-github/app/routes/index.tsx
View file
Open in desktop
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion examples/route-modal/app/routes/invoices/add.tsx
View file
Open in desktop
Expand Up @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions examples/search-input/app/routes/index.tsx
View file
Open in desktop
Expand Up @@ -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
Expand All @@ -137,7 +137,7 @@ export default function Index() {
</a>
))}
</div>
)}
) : null}
</>
)}
</div>
Expand Down