Why do I get an unexpected template string expression error?

Question

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

Laney

Answer 1

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.

Whiney

Answer 2

Use back quote before and after the expression `${adv_event.title}` instead of "${adv_event.title}".

Scraggy

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Peay

Answer 3

I was stuck with similar issue until I realized that the single or double quotes (''/ "") should not be used. The variable should be enclosed between backticks only (``).

Dobson