0

I'm trying to add different Id to a component based on a certain value.

My approach is like below

id={activePage === ('dashboard' || 'evc_detail')? 'bg_gradient':'bg_normal'}

In this scenario if the activePage is equal to dashboard the correct id is added but it does not register if activePage is equal to evc_detail. Is the way i'm using this condition wrong and how can i solve this?

CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182

1 Answers1

5

If you want to multiple comparisons you'll need to state them manually:

(activePage === 'dashboard' || activePage === 'evc_detail') ? 'bg_gradient' : 'bg_normal'

Another option is create an array of items (or a Set), and use Array.includes() (or Set.has) to check if an item is in the group:

const gradientPages = ['dashboard', 'activePage']

gradientPages.includes(activePage) ? 'bg_gradient' : 'bg_normal'

Your original expression activePage === ('dashboard' || 'evc_detail')? 'bg_gradient':'bg_normal' doesn't work if the activePage is not 'dashbarod' because of the way it's evaluated:

  1. 'dashboard' || 'evc_detail' is evaluated, since 'dashboard' is a truthy expression, the result is always dashboard.
  2. 'dashboard' is compared with activePage. If activePage is 'dashboard' the result is true, if not it's false.
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • If used your solution like this. but did not work..... id={(activePage === 'dashboard' || 'evc_detail') ? 'bg_gradient':'bg_normal'} – CraZyDroiD Nov 02 '19 at 06:34
  • Both solutions work - the 1st solution is `activePage === 'dashboard' || activePage === 'evc_detail'`. Note 2 `activePage ===` – Ori Drori Nov 02 '19 at 06:41