title: React conditional classnames using template strings and && operator
body: <p>There have been many questions on StackOverflow relating to applying conditional classnames to React components; however, I have not seen a good answer for this particular situation:</p>
  
  <p>I have a basic div that I want to conditionally apply the "is-required" class. Here is my approach:</p>
  
  <pre><code>&lt;div className={`some-class ${isRequired &amp;&amp; 'is-required'}`}&gt;
  </code></pre>
  
  <p>The main issue here is that when isRequired is false, then my compiled HTML code ends up looking like this:</p>
  
  <pre><code>&lt;div class='some-class false'&gt;
  </code></pre>
  
  <p>Obviously, I could use a ternary operator like this so I can return an empty string instead:</p>
  
  <pre><code>&lt;div className={`some-class ${isRequired ? 'is-required' : ''}`}&gt;
  </code></pre>
  
  <p>But then in the compiled HTML code there is this extra random space included in the class, which won't cause any rendering issues, but I still don't like it:</p>
  
  <pre><code>&lt;div class='some-class '&gt;
  </code></pre>
  
  <p>Even still, I could remove the space after "someClass" and include it before "isRequired", but now it's harder to read and feels kind of clunky:</p>
  
  <pre><code>&lt;div className={`some-class${isRequired ? ' is-required' : ''}`}&gt;
  </code></pre>
  
  <p>I have heard of utilities such as classnames, but I am looking for a simple solution where I don't need any additional packages. </p>
  
  <p>What is the recommended approach here?</p>