why I am getting template string expression error? [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 23 days ago.
Improve this question
I am making a dark mode in react and passing the state as a prop in a component but its giving an error.
I tried putting code under different situations but got no success
here is the code in which I am getting error
<nav className={'navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}'}>
that's what I am getitng
Unexpected template string expression no-template-curly-in-string

The answer is already given. I'll not repeat.
Still I'll give you this suggestion, you can use ternary operator to render className based on the props.mode value:
<nav className={`navbar navbar-expand-lg ${props.mode === 'light' ? 'navbar-light bg-light' : 'navbar-dark bg-dark'}`}>

You are getting errors because you are using single quotes '' instead of backticks `` ,
your code should look like this:
<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>

Related

can't pass variable as url parameter [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have some trouble with the code below:
function SidebarChat() {
const [seed, setseed] = useState("")
useEffect(() => {
setseed(Math.floor(Math.random() * 5000));
}, []);
return (
<div className="sidebarChat">
<Avatar src={'https://avatars.dicebear.com/api/human/${seed}.svg'} />
</div>
)
}
I can't pass ${seed} in the URL.
When I pass, its showing an error in the URL line and the '${seed}' is considered as a hardcoded string.
You're using quotes instead of backquotes when expressing the src, so the ${seed} won't be interpreted as it should be
To fix the issue:
<Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`} />
I think yo need to remove string const [seed, setseed] = useState("") to const [seed, setseed] = useState()
To add variable in string you have to put it in template literals as below:
`https://avatars.dicebear.com/api/human/${seed}.svg`
OR
you can also use variable in single quote as shown below:
'https://avatars.dicebear.com/api/human/' + seed + '.svg'
To learn more about template literals

ES6 concatenation inside data attribute [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am refactoring old code to ES6 to not use Jquery:
Target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
However, I am getting a lint error:
ERROR: Unexpected string concatenation. [prefer-template]
Problem is, that inside of a data attribute selector, templates are not recognized.
const slice = this.hash.slice(1);
target = target.length ? target : $('[name="${slice}"]');
It will say
ERROR: 'slice' is assigned a value but never used.
Any help would be appreciated.
You need to use backticks instead of quotation marks: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
$(`[name="${slice}"]`)

JQuery set input box value to this.value onclick? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
$("#something1").click(function(){
$("#something2").val(this.val);
});
I'm trying to set the value of something2 to the value of something1 onclick ...
this.value not this.val
$("#something1").click(function(){
$("#something2").val(this.value);
});
this.val will be evaluated to undefined. And it will be passed into the .val() function. Eventually it will be ignored.
Technically, in the .val()'s function definition, the logic would be, if it was called without any parameter, then the value of the current element over which the .val() was called will be returned.
calling $("#something2").val(undefined) will be similar to $("#something2").val()
Or use the jQuery val function:
$("#x").click(function(){
$("#y").val($(this).val());
});

Function can't find variable [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I was messing around with my game's CSS, and now I get a variable error for every button I click that calls a function, saying it can't find the variable.
I deleted the CSS and everything has changed, but the game is still broken.
I don't know whats wrong, so I have provided a link to download the code.
The error: reference error: can't find variable: duckClick
Related JavaScript:
var ducks = 0;
function duckClick(number){
ducks = ducks + number;
document.getElementById("ducks").innerHTML = ducks;
This calls duckClick but I'm getting a error saying it can't find it.
<button onclick="duckClick(1)">Find Duck</button>
Ah... a little does go a long way, especially in programming.
You forgot the curly closing duckClick, leaving it undefined.
function duckClick(number) {
ducks = ducks + number;
document.getElementById("ducks").innerHTML = ducks;
} //This curly brace
It seems like you have just forgot to close the duckClick-function with a } in your main.js file.

Will a ternary operator work inside .text()? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I want to append this to my DOM for every 'answer_' in my DB.
.append('<span>')
.text(format_date(answer_.LastModifiedDate))
But .LastModifiedDate won't always exist. Can I check for .LastModifiedDate in the text field? Maybe like this?
.append('<span>')
.text((answer_.LastModifiedDate) ? format_date(answer_.LastModifiedDate) : '')
Which doesn't work...
EDIT
I was stupidly checking for answer_.LastModifiedDate, instead of just answer.
So the following line works. Thanks for all the responses!
.append('<span>')
.text((answer_) ? format_date(answer_.LastModifiedDate) : '')
Of course that works. Ternary operators work anywhere you could normally place a variable. They evaluate to a value, just as if you used a string literal.
As #FreeAsInBeer pointed out, ternary works everywhere.
The only problem with your code is that you can't just use a (maybe) non-existant value as a boolean to check whether it is defined or not; How would you check if a variable holding "false" exists?
Instead you need to check the variables type:
.text(typeof answer_.LastModifiedDate !== 'undefined' ? format_date(answer_.LastModifiedDate) : '')
I was stupidly checking for answer_.LastModifiedDate, instead of just answer. So the following line works. Thanks for all the responses!
.append('<span>')
.text((answer_) ? format_date(answer_.LastModifiedDate) : '')

Categories

Resources