remix-run · kentcdodds · Nov 29, 2021 · Nov 23, 2021
diff --git a/docs/api/remix.md b/docs/api/remix.md
@@ -273,13 +273,15 @@ export default function Signup() {
       <Form method="post">
         <p>
           <input type="text" name="email" />
-          {errors?.email && <span>{errors.email}</span>}
+          {errors?.email ? (
+            <span>{errors.email}</span>
+          ) : null}
         </p>
         <p>
           <input type="text" name="password" />
-          {errors?.password && (
+          {errors?.password ? (
             <span>{errors.password}</span>
-          )}
+          ) : null}
         </p>
         <p>
           <button type="submit">Sign up</button>
@@ -399,9 +401,9 @@ function UserPreferences() {
         <input type="checkbox" name="darkMode" value="on" />{" "}
         Dark Mode
       </label>
-      {transition.state === "submitting" && (
+      {transition.state === "submitting" ? (
         <p>Saving...</p>
-      )}
+      ) : null}
     </Form>
   );
 }
@@ -748,12 +750,13 @@ function NewsletterSignup() {
         </button>
       </p>
 
-      {newsletter.type === "done" &&
-        (newsletter.data.ok ? (
+      {newsletter.type === "done" ? (
+        newsletter.data.ok ? (
           <p>Thanks for subscribing!</p>
         ) : newsletter.data.error ? (
           <p data-error>{newsletter.data.error}</p>
-        ) : null)}
+        ) : null
+      ) : null}
     </newsletter.Form>
   );
 }

diff --git a/docs/guides/api-routes.md b/docs/guides/api-routes.md
@@ -55,10 +55,12 @@ function CitySearchCombobox() {
               cities.submit(event.target.form)
             }
           />
-          {cities.state === "submitting" && <Spinner />}
+          {cities.state === "submitting" ? (
+            <Spinner />
+          ) : null}
         </div>
 
-        {cities.data && (
+        {cities.data ? (
           <ComboboxPopover className="shadow-popup">
             {cities.data.error ? (
               <p>Failed to load cities :(</p>
@@ -75,7 +77,7 @@ function CitySearchCombobox() {
               <span>No results found</span>
             )}
           </ComboboxPopover>
-        )}
+        ) : null}
       </Combobox>
     </cities.Form>
   );

diff --git a/docs/guides/data-writes.md b/docs/guides/data-writes.md
@@ -248,11 +248,11 @@ export default function NewProject() {
         </label>
       </p>
 
-      {actionData?.errors.name && (
+      {actionData?.errors.name ? (
         <p style={{ color: "red" }}>
           {actionData.errors.name}
         </p>
-      )}
+      ) : null}
 
       <p>
         <label>
@@ -265,11 +265,11 @@ export default function NewProject() {
         </label>
       </p>
 
-      {actionData?.errors.description && (
+      {actionData?.errors.description ? (
         <p style={{ color: "red" }}>
           {actionData.errors.description}
         </p>
-      )}
+      ) : null}
 
       <p>
         <button type="submit">Create</button>
@@ -346,11 +346,11 @@ export default function NewProject() {
           </label>
         </p>
 
-        {actionData && actionData.errors.name && (
+        {actionData && actionData.errors.name ? (
           <p style={{ color: "red" }}>
             {actionData.errors.name}
           </p>
-        )}
+        ) : null}
 
         <p>
           <label>
@@ -367,11 +367,11 @@ export default function NewProject() {
           </label>
         </p>
 
-        {actionData && actionData.errors.description && (
+        {actionData && actionData.errors.description ? (
           <p style={{ color: "red" }}>
             {actionData.errors.description}
           </p>
-        )}
+        ) : null}
 
         <p>
           <button type="submit">
@@ -453,12 +453,12 @@ export default function NewProject() {
           </label>
         </p>
 
-        {actionData?.errors.name && (
+        {actionData?.errors.name ? (
           <ValidationMessage
             isSubmitting={transition.state === "submitting"}
             error={actionData?.errors?.name}
           />
-        )}
+        ) : null}
 
         <p>
           <label>

diff --git a/docs/guides/mdx.md b/docs/guides/mdx.md
@@ -124,7 +124,9 @@ export default function Index() {
       {posts.map(post => (
         <li key={post.slug}>
           <Link to={post.slug}>{post.title}</Link>
-          {post.description && <p>{post.description}</p>}
+          {post.description ? (
+            <p>{post.description}</p>
+          ) : null}
         </li>
       ))}
     </ul>

diff --git a/docs/guides/optimistic-ui.md b/docs/guides/optimistic-ui.md
@@ -214,7 +214,7 @@ export default function NewProject() {
         <textarea name="description" id="description" />
         <button type="submit">Create Project</button>
       </Form>
-      {error && <p>{error}</p>}
+      {error ? <p>{error}</p> : null}
     </>
   );
 }

diff --git a/docs/tutorials/blog.md b/docs/tutorials/blog.md
@@ -873,20 +873,24 @@ export default function NewPost() {
       <p>
         <label>
           Post Title:{" "}
-          {errors?.title && <em>Title is required</em>}
+          {errors?.title ? (
+            <em>Title is required</em>
+          ) : null}
           <input type="text" name="title" />
         </label>
       </p>
       <p>
         <label>
           Post Slug:{" "}
-          {errors?.slug && <em>Slug is required</em>}
+          {errors?.slug ? <em>Slug is required</em> : null}
           <input type="text" name="slug" />
         </label>
       </p>
       <p>
         <label htmlFor="markdown">Markdown:</label>{" "}
-        {errors?.markdown && <em>Markdown is required</em>}
+        {errors?.markdown ? (
+          <em>Markdown is required</em>
+        ) : null}
         <br />
         <textarea rows={20} name="markdown" />
       </p>

diff --git a/examples/basic/app/root.tsx b/examples/basic/app/root.tsx
@@ -72,7 +72,7 @@ function Document({
         <RouteChangeAnnouncement />
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
+        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
       </body>
     </html>
   );

diff --git a/examples/blog-tutorial/app/root.tsx b/examples/blog-tutorial/app/root.tsx
@@ -70,7 +70,7 @@ function Document({
         {children}
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
+        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
       </body>
     </html>
   );

diff --git a/examples/blog-tutorial/app/routes/admin/new.tsx b/examples/blog-tutorial/app/routes/admin/new.tsx
@@ -1,10 +1,11 @@
 import { useTransition, useActionData, Form, redirect } from "remix";
 import type { ActionFunction } from "remix";
-import { createPost } from "~/post";
 import invariant from "tiny-invariant";
 
+import { createPost } from "~/post";
+
 export let action: ActionFunction = async ({ request }) => {
-  await new Promise((res) => setTimeout(res, 1000));
+  await new Promise(res => setTimeout(res, 1000));
   let formData = await request.formData();
   let title = formData.get("title");
   let slug = formData.get("slug");
@@ -35,19 +36,19 @@ export default function NewPost() {
     <Form method="post">
       <p>
         <label>
-          Post Title: {errors?.title && <em>Title is required</em>}
+          Post Title: {errors?.title ? <em>Title is required</em> : null}
           <input type="text" name="title" />
         </label>
       </p>
       <p>
         <label>
-          Post Slug: {errors?.slug && <em>Slug is required</em>}
+          Post Slug: {errors?.slug ? <em>Slug is required</em> : null}
           <input type="text" name="slug" />
         </label>
       </p>
       <p>
         <label htmlFor="markdown">Markdown:</label>{" "}
-        {errors?.markdown && <em>Markdown is required</em>}
+        {errors?.markdown ? <em>Markdown is required</em> : null}
         <br />
         <textarea rows={20} name="markdown" />
       </p>

diff --git a/examples/jokes/app/root.tsx b/examples/jokes/app/root.tsx
@@ -54,7 +54,7 @@ function Document({
       <body>
         {children}
         <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
+        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
       </body>
     </html>
   );

diff --git a/fixtures/gists-app/app/root.jsx b/fixtures/gists-app/app/root.jsx
@@ -66,12 +66,12 @@ export default function Root() {
         <div data-test-id="content" id="content">
           <Outlet />
         </div>
-        {data.enableScripts && (
+        {data.enableScripts ? (
           <>
             <ScrollRestoration />
             <Scripts />
           </>
-        )}
+        ) : null}
       </body>
     </html>
   );

diff --git a/fixtures/gists-app/app/routes/blog/index.tsx b/fixtures/gists-app/app/routes/blog/index.tsx
@@ -60,7 +60,7 @@ export default function BlogPosts() {
           {posts.map(post => (
             <li key={post.slug}>
               <Link to={post.slug} className="text-blue-700 underline">
-                {post.title} {locationPending && "..."}
+                {post.title} {locationPending ? "..." : null}
               </Link>
             </li>
           ))}

diff --git a/fixtures/gists-app/app/routes/fetchers.tsx b/fixtures/gists-app/app/routes/fetchers.tsx
@@ -93,11 +93,11 @@ export default function Tasks() {
 
       <hr />
       <h2>Tasks</h2>
-      {searchParams.has("q") && (
+      {searchParams.has("q") ? (
         <p>
           Filtered by search: <i>{searchParams.get("q")}</i>
         </p>
-      )}
+      ) : null}
 
       {tasks.map(task => (
         <TaskItem key={task.id} task={task} />
@@ -154,14 +154,14 @@ function TaskItem({ task }: { task: Task }) {
         }
       >
         {renderedTask.complete ? "Mark Incomplete" : "Mark Complete"}
-        {toggleComplete.state === "submitting" && (
+        {toggleComplete.state === "submitting" ? (
           <ProgressBar key={toggleComplete.submission.key} total={task.delay} />
-        )}
+        ) : null}
       </button>{" "}
       {task.name}{" "}
-      {toggleComplete.type === "done" && "error" in toggleComplete.data && (
+      {toggleComplete.type === "done" && "error" in toggleComplete.data ? (
         <span style={{ color: "red" }}>Error! {toggleComplete.data.error}</span>
-      )}
+      ) : null}
     </toggleComplete.Form>
   );
 }

diff --git a/fixtures/gists-app/app/routes/gists.jsx b/fixtures/gists-app/app/routes/gists.jsx
@@ -49,7 +49,7 @@ export default function Gists() {
                 to={user.id}
                 className="text-blue-700 underline"
               >
-                {user.name} {locationPending && "..."}
+                {user.name} {locationPending ? "..." : null}
               </Link>
             </li>
           ))}

diff --git a/packages/create-remix/templates/_shared_js/app/root.jsx b/packages/create-remix/templates/_shared_js/app/root.jsx
@@ -106,7 +106,7 @@ function Document({ children, title }) {
         {children}
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
+        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
       </body>
     </html>
   );

diff --git a/packages/create-remix/templates/_shared_ts/app/root.tsx b/packages/create-remix/templates/_shared_ts/app/root.tsx
@@ -113,7 +113,7 @@ function Document({
         {children}
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
+        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
       </body>
     </html>
   );

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -451,7 +451,7 @@ export let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
           {...prefetchHandlers}
           {...props}
         />
-        {shouldPrefetch && <PrefetchPageLinks page={href} />}
+        {shouldPrefetch ? <PrefetchPageLinks page={href} /> : null}
       </>
     );
   }
@@ -472,7 +472,7 @@ export let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
           {...prefetchHandlers}
           {...props}
         />
-        {shouldPrefetch && <PrefetchPageLinks page={href} />}
+        {shouldPrefetch ? <PrefetchPageLinks page={href} /> : null}
       </>
     );
   }