Switch statement not working within JSX (React.js)

Question

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}.

@Carcigenicate Yes. It is the identifier for the div and it's content. I have a script that will run 3 or more animations in div's, but I need them all to be different. That's why idents, idents2 etc. Now depending on the i, it should run a different animation. That's why the switch. — Kipcarry, Jun 24 '18 at 16:24
@vijayst It is right now? In case of I being 0, it runs indents, in case of I being 1, it runs idents2 etc. — Kipcarry, Jun 24 '18 at 16:26
You should add `console.log(i)` and `console.log(typeof i)` in your IIFE just before your switch statement. That'll give you a clear indication as to why your switch statement is not working. `i` is either not of type string or it's not "0", "1" or "2". — Jake Miller, Jun 24 '18 at 16:27
Double check your data. Your `switch` is fine. I'm betting that `i` is actually a number, or something else entirely. — Carcigenicate, Jun 24 '18 at 16:28
@JakeMiller Well, there's your problem. If `i` is a number, the switch needs to use numbers. — Carcigenicate, Jun 24 '18 at 16:31
if you were unsure about the variable type and want to allow either, you could case for both `case 0: case "0": //logic break;`. If a case is matched, it will continue to flow through the switch statement until it is broken with `break;` or something is returned with `return`. — TPHughes, Jun 24 '18 at 17:06

Gopikrishna S · Accepted Answer · 2018-06-24T16:44:37.357

0

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>

edited Jun 24 '18 at 16:44

answered Jun 24 '18 at 16:27

Gopikrishna S

2,221
4
25
39

@Carcigenicate switch is not O(1) it is as equivalent to nested if else, but mapping is faster as you are trying to access a value directly instead on comparing all the time. – Gopikrishna S Jun 24 '18 at 16:30
Will try this out, may I ask why the || indents3? – Kipcarry Jun 24 '18 at 16:31
thats the fallback default that you have in the switch in OP – Gopikrishna S Jun 24 '18 at 16:32
Ah, right, okay, will try this now. Why is does it reduce execution complexity though? – Kipcarry Jun 24 '18 at 16:33
javascript objects act like hashes and have direct access to values. But switch statements depend on the implementation of the browser, the browser can make it a linear complexity or make it n comparisons. Try [switch complexity](https://stackoverflow.com/questions/41109196) and [object complexity](https://stackoverflow.com/questions/12241676) for more info on the topic – Gopikrishna S Jun 24 '18 at 16:40

Switch statement not working within JSX (React.js)

1 Answers1