title: How do I combine a string + javascript for a className?
body: <p>How do I combine a javascript variable with a string? Do I have to concat the variable?</p>
  
  <pre><code>{ /* JSX + Bootstrap */ }
  &lt;div className={s.container} + "col-md-offset-4 col-md-4 well"&gt;
  </code></pre>
  
  <p>Edit: Thank you for the help. Here's the error I'm getting</p>
  
  <pre><code>&lt;div className={'col-md-offset-4 col-md-4 well' + s.container}&gt;
  // Error: Unexpected string concatenation
  </code></pre>
  
  <p>Thank you for the suggestions... Here's the error I get when I follow these docs <a href="http://eslint.org/docs/2.0.0/rules/prefer-template" rel="nofollow noreferrer">http://eslint.org/docs/2.0.0/rules/prefer-template</a></p>
  
  <pre><code>Module build failed: SyntaxError: JSX value should be either an expression or a quoted JSX text (23:23)
  
    21 |     return (
    22 |       &lt;div className={s.root}&gt;
  &gt; 23 |         &lt;div className=`col-md-offset-4 col-md-4 well ${s.container}`&gt;
  </code></pre>