Search code examples
reactjsternaryarray.prototype.map

multiple ternary operator inside a map

I have an api response that returns 1 of 7 different numbers. Each of those numbers represents a different word. (1 = complete, 2 = pending, etc)

my problem is to get that number i have to map over the api, so i end up with something like 

<p>{item.apiNumber}</p>

So my question is how can i take that number thats returned in the api map and display text based on it?

I tried to run an if statement in the map and setState, that didnt work.

I tried a single ternary, and thats fine, but i need 6 more.

Solution

  • You can create method inside your component which will analyse apiNumber and will return according text. Inside your paragraphs you will just call that method:

    getApiTextByNumber(number) {
  switch (number) {
    /*return appropriate text here*/
  }
}
...
<p>{this.getApiTextByNumber(item.apiNumber)}</p>