Dynamic tabIndex attribute in JSX + React
<p>How would I set the <code>tabIndex</code> attribute on a React component conditionally in the same way, say the <code>disabled</code> attribute is set?</p>
<p>I need to be able to set the value and/or remove the attribute all together.</p>
<p>First try was to make the entire attribute key and value a variable:</p>
<pre><code>&lt;div { tabIndex } &gt;&lt;/div&gt;
</code></pre>
<p>but the compiler complains.</p>
<p>Second thought was to:</p>
<pre><code>const div;
if( condition ){
   div = &lt;div tabIndex=&quot;1&quot;&gt;&lt;/div&gt;
}else{
   div = &lt;div&gt;&lt;/div&gt;
}
</code></pre>
<p>However, this is not desirable since my actual components have tons of attributes on them and I'd end up having large amounts of duplicate code.</p>
<p>My only other thought was to use a ref, then use jQuery to set the <code>tabindex</code> attributes, but I would rather not have to do it that way.</p>
<p>Any Ideas?</p>