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,
    });
  };

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,
    });
  };

• javascript
• reactjs
• eslint

• eslint also shows line and column, can you update question with more details? – Lukas Liesis Commented Apr 18, 2020 at 10:31
• it throws error on the drillLevel line – SDK Commented Apr 18, 2020 at 10:32
• Then check this one stackoverflow.com/a/61287706/1737158 – Lukas Liesis Commented Apr 18, 2020 at 10:35

4 Answers 4

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.

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();

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

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

https://eslint.org/docs/rules/no-unused-expressions

add option to your eslint to allowTernary = true

You can add it as a comment above the line or in eslint config where you have your rules defined

/*eslint no-unused-expressions: ["error", { "allowTernary": true }]*/