2

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}`>
Improve this question
10
  • You could look here as it looks similar, stackoverflow.com/questions/4234533/… Commented Jan 1, 2017 at 3:16
  • <div className={'col-md-offset-4 col-md-4 well' + s.container}> says "Unexpected string concatenation" Commented Jan 1, 2017 at 3:18
  • Can we see more code? The error doesn't make much sense - are you using a linter or something? Commented Jan 1, 2017 at 3:20
  • Yeah, eslint. I'll make an edit for more code. Thank you! Commented Jan 1, 2017 at 3:20
  • 3
    Try className={`col-md-offset-4 col-md-4 well ${s.container}`}> instead… Commented Jan 1, 2017 at 3:27

1 Answer 1

Reset to default
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}`}>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.