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

Here's the code I have now:

<div className={`${styles.dataGridHeader} ${styles['columns' + this.props.data.headers.length]}`}>

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

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

For example:

<div className={`${styles.dataGridHeader} ${styles[`columns${this.props.data.headers.length}`]}`}>

Super ugly, and doesn't work, would love a more elegant solution.

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

Here's the code I have now:

<div className={`${styles.dataGridHeader} ${styles['columns' + this.props.data.headers.length]}`}>

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

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

For example:

<div className={`${styles.dataGridHeader} ${styles[`columns${this.props.data.headers.length}`]}`}>

Super ugly, and doesn't work, would love a more elegant solution.

• javascript
• ecmascript-6

Share Improve this question Follow asked May 11, 2016 at 7:29 Steven BennettSteven Bennett 30911 gold badge44 silver badges1717 bronze badges 5

• 2 I'm not sure how this behaves in JSX, but in general, while not beautiful, nested template strings should work. – nils Commented May 11, 2016 at 7:38
• Maybe this is particular to JSX, but it seems without the use of an additional variable, the back ticks in the expression would terminate each other? – Steven Bennett Commented May 11, 2016 at 9:12
• Can you elaborate on "it doesn't work"? What exactly isn't working? Do you get an error? It works just fine in the Babel REPL. – Felix Kling Commented May 11, 2016 at 15:19
• @FelixKling Unexpected token error, JSX terminates the expression at the first back tick, wouldn't that be expected? – Steven Bennett Commented May 11, 2016 at 20:33
• 1 @Steven: Well, as I have shown, Babel can transpile it just fine and correctly. Maybe you are using an outdated version? The syntax itself (without JSX) is valid in ES6 (at least this works fine in Chrome: `foo${`bar`}`) – Felix Kling Commented May 11, 2016 at 20:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

How about this

const nColumn = 'columns' + this.props.data.headers.length
<div className={`${styles.dataGridHeader} ${styles[nColumn]}`}>

FYI there's an awesome library called classnames which applied to your code it looks something like this

import classNames from 'classnames'
const nColumn = 'columns' + this.props.data.headers.length
const divCls = classNames({
  [`${styles.dataGridHeader}`]: true,
  [`${styles[nColumn]}`]: true
})
<div className={divCls} />