How do I combine a string + javascript for a className?

Question

How do I combine a javascript variable with a string? Do I have to concat the variable?

{ /* JSX + Bootstrap */ }
<div className={s.container} + "col-md-offset-4 col-md-4 well">

Edit: Thank you for the help. Here's the error I'm getting

<div className={'col-md-offset-4 col-md-4 well' + s.container}>
// Error: Unexpected string concatenation

Thank you for the suggestions... Here's the error I get when I follow these docs http://eslint.org/docs/2.0.0/rules/prefer-template

Module build failed: SyntaxError: JSX value should be either an expression or a quoted JSX text (23:23)

  21 |     return (
  22 |       <div className={s.root}>
> 23 |         <div className=`col-md-offset-4 col-md-4 well ${s.container}`>

You could look here as it looks similar, http://stackoverflow.com/questions/4234533/how-do-i-concatenate-a-string-with-a-variable — Michael Eakins, Jan 01 '17 at 03:16
Can we see more code? The error doesn't make much sense - are you using a linter or something? — Andrew Li, Jan 01 '17 at 03:20
Please google for errors first http://eslint.org/docs/2.0.0/rules/prefer-template — Andy Ray, Jan 01 '17 at 03:22
ESLint get's want's you to use template literals instead of concatenating with +. You can get rid of it by using template literals (the second part of the linked duplicate). See http://eslint.org/docs/rules/prefer-template — Andrew Li, Jan 01 '17 at 03:22
Try `className={\`col-md-offset-4 col-md-4 well ${s.container}\`}>` instead… — poke, Jan 01 '17 at 03:27
The linked duplicate shows how to use the template literals in the second half of the answer — Andrew Li, Jan 01 '17 at 03:32

score 5 · Answer 1 · answered Jan 01 '17 at 03:33

5

@Poke and @Andrew Li deserves credit for figuring this one out. You need to follow the docs but also put it inside javascript with the curly brackets

<div className={`col-md-offset-4 col-md-4 well ${s.container}`}>

answered Jan 01 '17 at 03:33

Tyler L

835
2
16
28

Some days, I think those backticks are the best thing ever to happen to strings in javascript. It's so much neater than spamming `+` symbols or using `join` on arrays of strings. – freethebees Dec 29 '20 at 17:54

How do I combine a string + javascript for a className?

1 Answers1