This is something you do not always need, but I wrote this article for those looking for... Tagged with react, webdev.

Paul Knulst

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Conditional wrapping in React is something you do not always need, but I wrote this article for those looking for it. In some cases, they explain a service, but in others, they need to link to a detail page. When a specific flag is set, the component should get a parent wrapper to display it in a different variant.

Conditional wrapping in React

Thank you for reading, and let's connect!

Such small utility components can be really useful in React Native, where you should be more accurate with conditional rendering:
<pre><code class="language-typescript">// runtime error if condition is a string
{condition &amp;&amp; &lt;SomeComponent /&gt;}
</code></pre>
To make if error-safe, it’s better to use ternary:
<pre><code class="language-typescript">{condition ? &lt;SomeComponent /&gt; : null}
</code></pre>
We prevented possible runtime errors, but it hurts readability if you have a lot of conditionally rendered things close to each other:
<pre><code class="language-typescript">{condition ? &lt;SomeComponent /&gt; : null}
{condition ? &lt;SomeComponent /&gt; : null}
{condition ? &lt;SomeComponent /&gt; : null}
{condition ? &lt;SomeComponent /&gt; : null}
</code></pre>
Image that component takes multiple lines, so because of a bunch of small tokens (<code>/&gt;{?:}&lt;</code>) it becomes much harder to read JSX.
That’s why I ended up with <code>Invariant</code> utility component:
<pre><code class="language-typescript">import { ReactNode } from &#x27;react&#x27;

interface Props {
 condition: boolean
 component: ReactNode
 fallback?: ReactNode
}

const Invariant = ({ condition, component, fallback = null }: Props) =&gt; {
 // eslint-disable-next-line react/jsx-no-useless-fragment
 return &lt;&gt;{condition ? component : fallback}&lt;/&gt;
}

export default Invariant
</code></pre>

thanks, very helpful information!

Saving this to bookmarks. Thank you, <a href="https://app.daily.dev/dailydevtips" data-mention-id="JUNiIGCV-" data-mention-username="dailydevtips">@dailydevtips</a>