How to Replace Complex JSX Ternary Logic with a Simple Show Component in React

Background Introduction

React is usually used with JSX, which mixes JavaScript and view markup into a single module. Developers often write conditional rendering code like the following, which works functionally but can be hard to read due to excessive parentheses and mixed JS expressions with JSX elements.

<code>{
  tabList.length > 2 ?
    <TabBar
      tabList={tabList}
      tabIndex={tabIndex}
      hasLoginBar={showLoginStatus}
      tabChange={handleTabChange}
      type={'sticky'}
      colorTheme={colorTheme}
      fontType={'fzlantingyuan'}
    /> : ''
}

{taskList.length || isPreview ?
  <p className={styles.rulesText} onClick={() => clickRules()}>规则</p> : ''
}
</code>

The overuse of parentheses and nested expressions reduces readability. Two alternative approaches exist: using directives like Vue or using a component like Solid.js's Show.

Since React does not provide built‑in directives, a component‑based solution is the most practical.

Solid.js Show Component

In Solid.js, the Show component is a control‑flow primitive that renders its children when the when prop is true, otherwise renders a fallback. It behaves like a ternary operator but fits naturally into JSX templates.

<code>import { Show } from "solid-js";

function Show<T>(props: {
  when: T | undefined | null | false;
  keyed: boolean;
  fallback?: JSX.Element;
  children: JSX.Element | ((item: T) => JSX.Element);
}): () => JSX.Element;
</code>

Usage example:

<code>&lt;Show when={state.count > 0} fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
  &lt;div&gt;My Content&lt;/div&gt;
&lt;/Show&gt;
</code>

Show can also be keyed to a specific data model, allowing re‑execution when the model changes:

<code>&lt;Show when={state.user} fallback={&lt;div&gt;Loading...&lt;/div&gt;} keyed&gt;
  {user => &lt;div&gt;{user.firstName}&lt;/div&gt;}
&lt;/Show&gt;
</code>

Multiple Show components can be nested to handle multi‑level conditional logic:

<code>&lt;Show when={user}&gt;
  &lt;Show when={user.isAdmin} fallback={&lt;p&gt;Welcome, regular user!&lt;/p&gt;}&gt;
    &lt;p&gt;Welcome, admin user!&lt;/p&gt;
  &lt;/Show&gt;
&lt;/Show&gt;
</code>

Implementation in React

We can create a similar component in React with a simple functional implementation:

<code>interface ShowProps<T> {
  when: T | undefined | null | false;
  fallback?: React.ReactNode;
  children: React.ReactNode | ((item: T) => React.ReactNode);
}

function Show({ when, fallback = null, children }: ShowProps<any>) {
  return when ? children : fallback;
}
</code>

Applying this component to the earlier example yields cleaner JSX:

<code>&lt;Show when="tabList.length > 2"&gt;
  &lt;TabBar
    tabList={tabList}
    tabIndex={tabIndex}
    hasLoginBar={showLoginStatus}
    tabChange={handleTabChange}
    type={'sticky'}
    colorTheme={colorTheme}
    fontType={'fzlantingyuan'}
  /&gt;
&lt;/Show&gt;

&lt;Show when="taskList.length || isPreview"&gt;
  &lt;p className={styles.rulesText} onClick={() => clickRules()}&gt;规则&lt;/p&gt;
&lt;/Show&gt;
</code>

To support asynchronous data, an AsyncShow component can be added:

<code>const AsyncShow = ({ when, fallback, children }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    Promise.resolve(when).then(result => {
      setData(result);
      setIsLoading(false);
    });
  }, [when]);

  if (isLoading) return fallback;
  return data ? children : null;
};

// Usage
&lt;AsyncShow
  when={fetchUserData()}
  fallback={&lt;Loading /&gt;}
&gt;
  {user => &lt;UserProfile data={user} /&gt;}
&lt;/AsyncShow&gt;
</code>

Conclusion

By combining JSX with a component‑based approach, React developers can achieve more elegant conditional rendering. This article introduced Solid.js's Show component and demonstrated how to implement an equivalent Show component in React, replacing traditional ternary expressions or logical operators. The result improves code readability and makes JSX templates more intuitive.

Learning patterns from other frameworks broadens thinking and helps optimize existing technology stacks without discarding them, ultimately leading to better code quality and team standards.