Template string literal inside of another template string literal
<p>So the code I have currently, works, but I'm receiving the <code>prefer-template: Unexpected string concatenation</code> ESLINT error, which I'd like to avoid by perhaps knowing the correct way to do this with template strings literals.</p>

<p>Here's the code I have now:</p>

<pre><code>&lt;div className={`${styles.dataGridHeader} ${styles['columns' + this.props.data.headers.length]}`}&gt;
</code></pre>

<p>I want to apply a class <code>column1</code>, <code>column2</code>, <code>column3</code>, <code>etc</code>, depending on the number of columns in the data report, so that I can apply some specific styling to those elements. </p>

<p>What I have works, but is there a way to avoid using concatenation and only use template string literals?</p>

<p>For example:</p>

<pre><code>&lt;div className={`${styles.dataGridHeader} ${styles[`columns${this.props.data.headers.length}`]}`}&gt;
</code></pre>

<p>Super ugly, and doesn't work, would love a more elegant solution.</p>