How to refactor the ternary operator code using react and typescript?

Question

i am getting the color based on the variable books and pens. if books or pens value is 0 apply red, value is 1 apply blue else green.

From code below the code is redunant meaning i am applying same colors based on value. how can i refactor it such that it can be be simplified further.

Below is the code,

const booksCountColor =
    books === 0
        ? red
        : books === 1
        ? blue
        : green;
const pensCountColor =
    pens === 0
        ? red
        : pens === 1
        ? blue
        : green;

Could someone help me with this. thanks.

Will the count be 2 in case of green?

CertainPerformance
– CertainPerformance

2020-05-05 08:37:23 +00:00
Commented May 5, 2020 at 8:37 — CertainPerformance
– CertainPerformance, Commented May 5, 2020 at 8:37
anything above 1

someuser2491
– someuser2491

2020-05-05 08:37:54 +00:00
Commented May 5, 2020 at 8:37 — someuser2491
– someuser2491, Commented May 5, 2020 at 8:37

CertainPerformance · Accepted Answer · 2020-05-05 08:38:27Z

1

Nested conditionals are awful for readability. I'd make an array instead, and alternate with green:

const colors = [red, blue];
const booksCountColor = colors[books] || green;
const pensCountColor = colors[pens] || green;

You could make it a bit DRY-er by putting it into a function

const colors = [red, blue];
const getColor = index => colors[index] || green;
const booksCountColor = getColor(books);
const pensCountColor = getColor(pens);

answered May 5, 2020 at 8:38

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wentjun · Accepted Answer · 2020-05-05 08:57:28Z

1

The problem with nested ternary statements/if else statements is that it can be rather messy. You can consider rewriting it by using the early return pattern to keep things clean.

const booksCountColor = () => {
  if (books === 0) {
    return red;
  }

  if (books === 1) {
    return blue;
  }

  return green;
};

const pensCountColor = () => {
  if (pens === 0) {
    return red;
  }

  if (pens === 1) {
    return blue;
  }

  return green;
};

answered May 5, 2020 at 8:57

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

3 Comments

someuser2491 Over a year ago

true this is easy to read...but we have a pattern to use only ternary when possible.

user13258211 Over a year ago

Questionable pattern imo, ternary is fine for short non nested conditions, but it gets messy quickly.

wentjun Over a year ago

single-layered ternary and if else statements are fine. The only issue is when you start nesting them. nested ternary operators is actually one of the rules stated in eslint (eslint.org/docs/rules/no-nested-ternary)

Collectives™ on Stack Overflow

How to refactor the ternary operator code using react and typescript?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related