I am trying to make my switch work within JSX, but for some reason it doesn't work.
Every output has an ID, which is I. Now I am trying to make a switch statement with I, but it will always return the default value.
Why?
My code:
{(() => {
switch (i) {
case "0": return "{indents}";
case "1": return "{indents2}";
case "2": return "{indents3}";
default: return "{indents3}";
}
})()}
This is all within a div with attribute key={i}.
I would recommend maps instead. Maps/objects are type insensitive. It will also reduce execution complexity:
const map = {
0: indents,
1: indents2,
2: indents3
}
<div>{map[i] || indents3}</div>
Alternatively, since you are using 0,1,2.., you can also have it as an array.
const map = [indents, indents2, indents3];
<div>{map[i] || indents3}</div>
Related
My Switch case keeps on going to default.
The condition is from the intersectionWord which outputs a specific keyword from an array which matches up to a word in the trigger word array aka an intersectionWord.
const TriggerWord = ["weather", "add", "multiply", "divide", "subtract", "hi", "hello",];
const intersectionWord = TriggerWord.filter(element => request.requestContent.includes(element));
And the objective was to pass that trigger word into the switch statement to evaluate if any of those cases match up. If they do match up it should output an alert. But currently it just seems to go straight to the default case every time.
I don't know where it is going wrong.
switch (intersectionWord) {
case TriggerWord[0].toString:
alert("Checking the weather");
break;
case TriggerWord[1].toString:
alert("Doing the math");
break;
case TriggerWord[2].toString:
alert("Doing multiplication");
break;
case TriggerWord[3].toString:
alert("Doing the division");
break;
case TriggerWord[4].toString:
alert("Doing the subtraction");
break;
case TriggerWord[5].toString:
alert("Just saying Hello");
break;
case TriggerWord[6].toString:
alert("Just saying Hello");
break;
default:
alert("I couldn't find a TriggerWord");
}
As noted in the comments, there are two problems with your code:
You're missing the () after .toString so it will call the function; also, it's not necessary to use .toString(), since they're already strings.
intersectionWord is an array, so it will never be equal to any of the strings in TriggerWords.
Instead of the switch/case statement, consider using an object:
const messages = {
weather: "Checking the weather",
add: "Doing the math",
multiply: "Doing multiplication",
...
}
Then you can loop over intersectionWords, looking up the corresponding message:
intersectionWords.forEach(word => alert(messages[word]))
Or you could combine them all into a single message:
let actions = intersectionWords.map(word => messages[word]).join(", ");
if (actions) {
alert(actions);
} else {
alert("No matching activity");
}
I want get the value of each object in my switch case, based on the value i get in the case, I need to return some statements; Below is my code what I have tried:
// Here I will get the list of devices
setFilterCollections() {
return this.deviceService.getDeviceTypes();
}
loadDevices(tenant: string) {
this.isLoading = true;
this.deviceTypes = this.setFilterCollections();
Object.keys(this.deviceTypes).forEach((dType) => {
console.log(this.deviceTypes[dType]);
// // Here also (In the above console) I am getting the list of devices [Please find attached list below of this question]. From switch case i am not getting the each device type. Am I doing something wrong?
switch (this.deviceTypes[dType]) {
case 'ComX':
return this.ComXFilter = '{ "deviceType": "ComX" }';
case 'IoTBridge':
return this.ComXConnectedFilter = '{ "deviceType": "IoTBridge" }';
}
});
list includes from the console:
value
:
(10) ['ComX', 'IoTBridge', 'PAS400', 'PAS600', 'PAS800', 'LORADPAS', 'Lora', 'DPas', 'SE8000', 'Room Controller']
[[Prototype]]
:
Object
Please help me. I would really appreciate :) Thanks in advance!
I have been trying for a few hours to get a react component to load an image of a playing card depending on the prop passed in. I have been looking online and the answers I find to this issue are confusing me.
Basically I have an assets/cards directory with an image for each card in a deck of 52 playing cards. I want to map the code for the card (e.g sJ 'jack of spades') to the corresponding image. I thought this would be simple, but it doesn't seem so. I have the code below, but the require part is not working. Is there a preferred design patter for doing this sort of thing?
let images = {};
function getCard(val) {
if(val + 2 < 11) {
return (val + 2).toString();
} else {
switch(val + 2) {
case 11:
return 'J';
case 12:
return 'Q';
case 13:
return 'K';
case 14:
return 'A';
}
}
}
function getSuit(val) {
switch (val) {
case 0:
return 's';
case 1:
return 'd';
case 2:
return 'c';
case 3:
return 'h';
}
}
for(let i=0;i<4;i++) {
for(let j=0;j<13;j++) {
images[`${getSuit(i)}${getCard(j)}`] = `../assets/cards/${getSuit(i)}${getCard(j)}.png`;
}
}
const CardImage = (props) => {
return (
<img src={require(images[`${props.card}`])} alt={props.card} />
);
}
export default CardImage;
UPDATE
The component is available at https://codesandbox.io/s/distracted-dan-es7tb?file=/src/App.js
you cant add src attribute like that
import all images like this
import blah from '../assets/images/blah.png'
then you must return blah in your code for value of src instead of your code
Maybe have className={name that changes depending on number you get} like so and then in css
you tell which className has what cardImg behind it. You should use state to change className.
I encountered a strange problem while developing an angular app.
I wrote this piece of code some time ago and it's working perfectly:
selectedGeoArea: any
receiveStoreEvent(event) {
switch (event.constructor) {
case City:
console.log("city")
break
case Province:
console.log("province")
break
case String:
console.log("region")
break
}
this.selectedGeoArea = event
}
now, selectedGeoArea is then passed as input to another component
<text-search [selectedGeoArea]="selectedGeoArea"></text-search>
export class TextSearchComponent {
#Input() selectedGeoArea: any
buildQuery(): string {
switch (this.selectedGeoArea) {
case City:
return `${this.addressQuery}, ${this.selectedGeoArea.name}, ${this.selectedGeoArea.province.code}, ${this.selectedGeoArea.province.region}`
case Province:
return `${this.addressQuery}, ${this.selectedGeoArea.code}, ${this.selectedGeoArea.region}`
case String:
return `${this.addressQuery}, ${this.selectedGeoArea}`
}
return this.addressQuery
}
the problem is that buildQuery() always returns the value of addressQuery, meaning that the switch is not working at all. selectedGeoArea has the correct value and type as set in receiveStoreEvent().
what am I missing here?
You either need to do the following
this.selectedGeoArea = event.constructor
or the following
switch (this.selectedGeoArea.constructor) {
.
.
.
}
In the initial function you were matching for event.constructor but in the new function you were matching only for event.
I am trying to figure out why this code doesn't work..
All i want is to have simple event delegation to assign one event listener.
it only alerts, it doesn't animate.
Please let me know whats wrong here:
$(document).ready(function() {
var img = $("img");
$("span").click(function(e){
var targetClicked = $(e.target).attr('class');
//the alert works fine
alert(targetClicked)
switch(targetClicked){
// i deleted the rest of the cases
case d:img.stop(false,true);
break;
case e:img.slideDown().animate({"width":200, height:200, opacity:0.4,});
break;
//nothings works here as well
case f:alert("hi");
break;
}
});
});
What are d and e in your switch statement case conditions? The way you're code is written right now, they're being treated as variables and your code is probably blowing up with a "'d' is undefined" error.
If you want to switch on the class names "d" and "e", then you need to use the class names as strings:
switch (targetClicked) {
case "d":
//...
break;
case "e":
// ...
break;
}