Questions tagged [template-literals]

The tag has no usage guidance, but it has a tag wiki.

template-literals
Filter by
Sorted by
Tagged with
1 vote
1 answer
25 views

TailwindCSS template literals strange behavior

I have the following component: function SaleBadge({ textContent, badgeColor }) { return ( <Badge className={`bg-${badgeColor}-200 hover:bg-${badgeColor}-300 animate-pulse align-middle ...
Kristoffer Andersson's user avatar
0 votes
2 answers
61 views

Dynamically calling a function based on its name stored in a string

I am trying to dynamically call a function based on its name stored in a string using bracket notation on the window object. I have also tried using eval() to no success. The project has been bundled ...
Laurence B's user avatar
1 vote
1 answer
31 views

d3js inline event handler within template literal

In the example below there is an inline event handler that is not working, because there is something wrong with escaping characters. In general inline handlers are bad practice and difficult to ...
Hölderlin's user avatar
-1 votes
1 answer
25 views

I hava problem about "template literals" when i use in react [duplicate]

when I start vscode Template literals working,Template literals working when i start. But "1s" after Template literals not working.Template literals not working I installed ESLint and I make ...
asdasd asdasdasdasd's user avatar
0 votes
1 answer
82 views

For which values does template string literal throws?

A simple template literal expression: `${value}` … will throw TypeError in at least two cases: if value is a Symbol; try { `${Symbol('nope')}` } catch (error) { console.error(`${error.name}:...
Parzh from Ukraine's user avatar
0 votes
1 answer
76 views

Insert parameter in template literal for fetch URI in React useEffect

Utilizing .then with fetch uri insertion of '...${currency}.json' parameter runs correctly w/ no error: useEffect(() => { fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/...
Paul's user avatar
  • 994
0 votes
0 answers
133 views

Webpack warning "the request of a dependency is an expression" goes away using template strings instead of variables. How?

I had a webpack warning in my nextjs dev server saying Critical dep: the request of a dependency is an expression This was because I imported some modules using variables, but the warning got away ...
avikt's user avatar
  • 1
0 votes
2 answers
44 views

Selecting an element ID that was created in an innerHTML variable

How do I select the textfield element "member-name"? function revealPaywall (){ const paywall = document.getElementById('paywall') const name = localStorage.getItem("value"); //...
HectorACampo NYC's user avatar
0 votes
0 answers
32 views

Render parts of template literal bold and create new lines

Using JS and relatively new to it: I'm trying to render two variables in bold that are within a template literal. They're taken from input fields, so when the user publishes their input the toValue ...
ghdem's user avatar
  • 1
0 votes
1 answer
75 views

url for images not rendering when using template literals and Tailwind css

I used template literals to pass down fetched urls from my database to my react frontend, however, images don't g et rendered, only when I hard code the URL directly, here is my code: import React, { ...
codesforjenuel's user avatar
2 votes
2 answers
176 views

How to write String.raw() with normal JavaScript code

According to MDN, String.raw() is the only built-in template literal tag. It has close semantics to an untagged literal since it concatenates all arguments and returns a string. You can even re-...
timkay's user avatar
  • 697
1 vote
0 answers
30 views

How to use a component inside NProgress template

I want to use NProgress module and add custom component inside template in next.js app. Originally I can set custom NProgress template by using below code: NProgress.configure({ template: "<...
szolim's user avatar
  • 11
1 vote
1 answer
46 views

Is it possible to get syntax highlighting and other editor services for html template literals in Svelte?

I wrote code that looks like: <script lang="ts"> ... { content: ` <p> Some content </p> ...
yairchu's user avatar
  • 24.1k
0 votes
0 answers
21 views

OnChange Uncaught TypeError: Not a Function on element created by template literals from the same Class

I have an issue calling a method onChange from an element created by template literals. The element (checkbox) is created from the same class that includes a method that should be called by the ...
Luke's user avatar
  • 517
-4 votes
2 answers
96 views

What is the function of the hash tag in this template literal?

This is the code I don't understand: // Show the selected panel grandparent.parentNode .querySelector(`#${target.getAttribute("aria-controls")}`) .removeAttribute("hidden");...
Naj's user avatar
  • 207
0 votes
1 answer
301 views

Next JS buggy template literals

I have an next.js app and I see that stuff in template literals doesn't get rendered often. Searched around google most likely there is a solution to that just wasn't willing to spend so many hours ...
kristijanlazarev's user avatar
1 vote
1 answer
350 views

How to inject typescript into webview as string of javascript?

I just started working with react-native-webview. I added a vs-code extension called es6-string-javascript, which has alleviated some of the hassle. But to get the benefits of linting and type ...
jehillert's user avatar
  • 382
1 vote
2 answers
214 views

How to use path in require method in react with node.js?

I am trying to paste a path to a picture within the img tag with the require() method. This is the component. Props are passed from the parent correctly because console.log(img) return the correct ...
Leung Cho-shing's user avatar
7 votes
1 answer
130 views

How do I create a multiline string in Raku?

In JavaScript (ES6), you can use template literals (``) to create multiline strings as shown in the following example: const html = ` <div> <p>Raku is <b>ofun</b>.</p&...
uzluisf's user avatar
  • 2,790
2 votes
1 answer
220 views

Typescript : recursive template literal type, allow both string and specific chaining

MCVE https://stackblitz.com/edit/typescript-s5uy47?file=index.ts%3AL25 (try using the autocomplete on the parameter of the function f to see what it achieves) I am trying to create a recursive ...
MGX's user avatar
  • 2,916
1 vote
2 answers
57 views

Expressions in my template literal don't get updated

I define the variable description as a template literal with an expression in it. When I then use description later in runScenario, the expression returns what money started as, not what it currently ...
pyradim's user avatar
  • 15
0 votes
2 answers
37 views

How to keep the order intact as it is in the response got from the API call using vanilla js?

I'm trying to fetch the list of products from the API with passing the query for ascending and descending orders. After clicking desc from the dropdown, the response I'm getting is correct but the ...
Subhojit's user avatar
  • 1,489
0 votes
1 answer
117 views

How to make a JS foreach loop inside of a template literal block of HTML?

I have a block of HTML code that I'm repeating 9 times, each time modifying some of the classes and other stuff inside of it. Fot this, I'm using a JavaScript for loop containing a template literal as ...
user avatar
2 votes
1 answer
48 views

Multiline text when using multiple ternary operators in Template literals [duplicate]

I want to create multiline text using multiple ternary operators within a single Template literal. const toolTipText = `${2 * 5 === 10 ? "The value is same" : ""} ${"a" === "b" ? "" : "Different ...
moys's user avatar
  • 7,879
3 votes
1 answer
451 views

How to use spaces in Template Literals?

I have a <li> element showing dynamic content using Template Literals (template strings). <li className='floatLeft'><span><b>Galley Details</b></span> <br/>{`$...
bugsmasher's user avatar
1 vote
1 answer
37 views

How to ensure object values contain their key with TypeScript?

Using TypeScript literal type, I'm able to ensure that the object values are made of a Color and the string -primary. type Color = "green" | "blue" | "orange" | "red&...
Maxime Lechevallier's user avatar
1 vote
1 answer
73 views

Typescript interface extends same interface multiple times

I have the following situation: I have type with the following definition: type A<year extends number> = `a${year}` And I want to have an interface or a type such that, it has a variable amount ...
HermanTheGermanHesse's user avatar
0 votes
0 answers
618 views

How to trigger the "interpolation" part of 'template literals' manually on a variable containing a string [duplicate]

In multiple of my projects I have pre-defined strings with placeholders in them. I am trying to make a string stored in a variable be interpreted as a template literal and thus also have the "...
Dex's user avatar
  • 714
-1 votes
1 answer
37 views

how to use same style on different component with styled-components

i have this two component in React-native const TouchableContainer = styled.TouchableOpacity` flex: 1; background-color: ${(props: any) => (props.expired ? '#ebebeb' : '#ffffff')}; flex-...
AlainIb's user avatar
  • 4,598
0 votes
2 answers
771 views

How to update tailwindcss dynamically with template literals in React.js?

I'm having trouble with a Tailwind CSS class not updating in the browser, even though it appears to be updated in the DOM tree. Specifically, I'm trying to update the left property with a dynamic ...
Harshdeep Singh's user avatar
0 votes
0 answers
25 views

(dollar sign + curly brackets) template literal not working [duplicate]

I'm working through a course and knew I had to use a template literal to get what I needed in the console. only when I finish it and save, it prints what I typed and didn't do its template literal ...
Haley Sigler's user avatar
0 votes
1 answer
2k views

How can I get syntax highlighting for styled components template literals?

Using styled-components inside a react project, I am writing the following code. In a video I'm following to code along, the instructors VS Code is applying color format to the template literal. I'm ...
arnofkd's user avatar
0 votes
0 answers
23 views

Template Literal apparently not interpreted (but it is!)

This code demonstrates the interpretation of a template literal but apparently it hasn't been interpreted when applied to the button's onclick property. But it still works, how? <!DOCTYPE HTML> ...
Enterfest's user avatar
0 votes
1 answer
73 views

Trying to select an element class inside a template literal and once i declared it using the DOM manipulation keep getting not defined on my console

I am trying to select the element class inside the template literals and also make them available to be use outside the eventListener: addToCart.addEventListener('click', (e) => { let ...
hayzed's user avatar
  • 1
0 votes
1 answer
45 views

how to specify what content to show on templates literals

I'm using template literals to display some fetched data, I've manage to display everything I need to the frontend, however some of the content is hidden as is meant to be togglable, however , I'm ...
Jhona's user avatar
  • 49
2 votes
0 answers
70 views

How can I store a template literal to be evaluated later with arbitrary parameters?

I have a scenario where I have to interpolate a variable into different templates based on status variable. const output = () => { if (result) { return result; } else if (status ...
stackuser's user avatar
0 votes
1 answer
146 views

How to access fetched data and visualize it using template literals

I'm fetching some json data and: I get some of the data diplayed here: ; so far I've manage to display everything on the frontend, but I can not access it: ex: here is the data visualized: ex: As I'm ...
Jhona's user avatar
  • 49
2 votes
0 answers
410 views

string interpolation for dynamic html attributes in template literals

I am currently working on a project using the storybook. This is what I have in mdx file now: export const Template = ({dark, width, height, theme}) => { return html` <my-button @...
Jessica kahbjkdbv's user avatar
-1 votes
1 answer
26 views

how to set the template & args in template literals at runtime in JavaScript

I'm fetching template from the db table & the value is returned as Hello ${customerName}: Welcome! to our site. This is dummy.Please reach us at ${websiteLink} The values of these are in the req ...
Kgn-web's user avatar
  • 7,327
1 vote
3 answers
58 views

Javascript Set delete method syntax

In working with a new Set as opposed to a new Array, because the Set handles duplicate entries well, I struggled with the syntax passed using the delete() method. This would apply to other methods but ...
Barbicane's user avatar
0 votes
2 answers
106 views

Passing Nodes to template literal & rendering it?

I have a function returning a template literal: function generateStuff(nodes) { const output = `<ul>${nodes}</ul>`; return document.body.innerHTML = output; } nodes is an array of <...
Wordpressor's user avatar
  • 7,413
1 vote
1 answer
247 views

Strange error with template literal adding *{} to string

I am facing a weird error where copying svelte code into a template literal is adding *{} to the string. I tried replicating this in a REPL to share, but the error didn't occur there. Does anyone know ...
ben mi's user avatar
  • 65
0 votes
2 answers
350 views

v-bind reactivity inside a template literal?

I'm generating a template literal html that feeds into the v-tooltip. I'm trying to bind the src of the images inside each li to react to changes in other computed properties but it doesn't seem to ...
Subjugation's user avatar
0 votes
0 answers
22 views

Specific Question about why a function has been placed inside an object [duplicate]

So I've been working through Freecodecamp's courses. I've come across this piece of code in an example: const person = { name: "Taylor", sayHello: function() { return `Hello! My name ...
Tack00's user avatar
  • 1
1 vote
2 answers
68 views

How can you use Tuple elements as keys in a Mapped Type or template literal in typescript?

Are there any incantations to properly type the following function in typescript? given a function createMap() that takes: a prefix (e.g. foo) and a tuple of suffixes (e.g. ['a', 'b', 'c']) calling ...
andersonvom's user avatar
  • 11.8k
0 votes
1 answer
68 views

Javacript Template Literals scope

I want to declare a variable inside a template literal and use it in the same template later is that possible? If this is not possible it seems like a missing feature to me. const tmp = tag` some ...
inux's user avatar
  • 109
0 votes
0 answers
92 views

Typescript - is Rename symbol possible when "keyof" is used?

I'm trying the concept of using TypeScript with "AsciiDoc" as a DSL. //// interface Login { "User name": "OK" | "KO" "Password": string "...
qwertys's user avatar
  • 47
0 votes
2 answers
89 views

Working on a program that takes items to make a shopping list. I must store them as variables item1,item2,item3 and output each item separately

Is there a way to reduce the number of prompts to one line of code, perhaps a prompt that allows for a multi-line input box when prompted in the format of a list? Any feedback is much appreciated. let ...
Safsouf's user avatar
0 votes
2 answers
258 views

How to clone or create a nested DOM node and change all its containing id values according to a current id?

I need to display some numbers, strings from a class named Student, but i can't figure it out how i can change the id from children element. I have to use JavaScript. what i tried to do: class Student{...
AmicuLL's user avatar
  • 55
0 votes
1 answer
137 views

Variable declared inside template literal context problem

This code works fine in the global context: console.log(`${text = "It works!", text}`); But when you import it from another module (from html doc) <script type="module" src=&...
Jorge Luis's user avatar

1
2 3 4 5
12