<h1 id="heading-using-inline-ternary-operator">Using Inline Ternary Operator</h1>
<h2 id="heading-conditionally-spreading-the-object-properties">Conditionally Spreading the Object Properties</h2>
We can use ternary or logical <code>&amp;&amp;</code> operator, along with the spread operator, to conditionally add props to a component like so:
<pre><code class="lang-js">&lt;Tooltip
 message={message}
 // using the ternary operator
 {...(!isMobile ? { position: 'left' } : {})}
 // using the logical &amp;&amp; operator
 {...(!isMobile &amp;&amp; { position: 'left' })}
 &gt;
 &lt;InfoIcon /&gt;
&lt;/Tooltip&gt;
</code></pre>

# Using Inline Ternary Operator

## Conditionally Spreading the Object Properties

We can use ternary or logical `&&` operator, along with the spread operator, to conditionally add props to a component like so:


```js
<Tooltip
 message={message}
 // using the ternary operator
 {...(!isMobile ? { position: 'left' } : {})}
 // using the logical && operator
 {...(!isMobile && { position: 'left' })}
 >
 <InfoIcon />
</Tooltip>
```

Sometimes we need to avoid passing the entire prop key based on some condition, the conditional spreading here to rescue.

How to Conditionally Add Props to a React Component?

TIL #2: How to Conditionally Add Props to a React Component?

I'm a Senior Full Stack Developer with 10+ years of experience. I strive to be a humble team player and be approachable to receive and give feedback.


Web Chronicles

Web Chronicles

TIL #2: How to Conditionally Add Props to a React Component?

Using Inline Ternary Operator

Conditionally Spreading the Object Properties