Expected an assignment or function call and instead saw an expression.eslintno-unused-expressions

Question

Hi I am using a ternary operator inside a function. But eslint throws error on this. Pls help me to fix this.

  const Test = (showBtn, bubbleId, latitude, longitude, zoom, drillLevel) => {
    setShowBtn(showBtn);
    drillLevel === 'area' ? getCitiesData(bubbleId) : getStatesData();
    setViewport({
      ...viewport,
      latitude,
      longitude,
      zoom,
    });
  };

Answer 1

If your current code works, it would probably be more appropriate to avoid the conditional operator entirely and use if/else instead:

if (drillLevel === 'area') getCitiesData(bubbleId)
else getStatesData();

This way, you don't actually have any unused expressions, which is the right way to fix this sort of linter warning.

Answer 2

You can simply add this allowTernary comment above the ternary operator expression, to disable eslint error for that line:

/*eslint no-unused-expressions: ["error", { "allowTernary": true }]*/
drillLevel === 'area' ? getCitiesData(bubbleId) : getStatesData();

Answer 3

May be you forget to assign get* result to some variable, waht about viewport?

const data = drillLevel === 'area' ?
  getCitiesData(bubbleId) :
  getStatesData();