Search code examples
javascriptreactjsgatsbyeslint

Why do I get an unexpected template string expression error?


Is it possible to use map array data (${adv_event.title}) inside a react-structured-data JSX?

I tried adding backticks with no success: name: "`${adv_event.title}`",

Attempt 1:

<Generic jsonldtype="event" schema={{
  name: "${adv_event.title}", 
  description: "",
  startDate: "YYYY-MM-DDT:HH:MM",
  endDate: "YYYY-MM-DDT:HH:MM",
  image: "",
}}>

Error:

296:31 warning Unexpected template string expression no-template-curly-in-string


Solution

  • This is an warning generated by ESLint: no-template-curly-in-string

    Disallow template literal placeholder syntax in regular strings (no-template-curly-in-string)

    ECMAScript 6 allows programmers to create strings containing variable or expressions using template literals, instead of string concatenation, by writing expressions like ${variable} between two backtick quotes (`). It can be easy to use the wrong quotes when wanting to use template literals, by writing "${variable}", and end up with the literal value "${variable}" instead of a string containing the value of the injected expressions.

    If you want to just assign that variable you should do this:

    <Generic jsonldtype="event" schema={{
        name: adv_event.title, 
        description: "",
        startDate: "YYYY-MM-DDT:HH:MM",
        endDate: "YYYY-MM-DDT:HH:MM",
        image: "",
    }}>
    

    A template string is not needed in your case.