Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

Question

Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

Is there a way to prevent the occurrence of the "no nested ternary" error in TypeScript?

                  disablePortal
                  options={
                    // eslint-disable-next-line no-nested-ternary
                    units=== "mm"
                      ? valuesMm
                      : units === "km"
                      ? valueskm
                      : valuesls
                  }

I attempted to use this code but encountered an error.

options={
                    units=== "mm"
                      ? valuesMm
                      : [
                          units.slumpUnit === "cm"
                            ? valuesCm
                            : valuesIn,
                        ]
                  }

typescript material-ui nested conditional-operator

Answer 1

Answer №1

This location seems like a perfect spot to break the norm and nest it - however, if nesting isn't your style, another approach is to incorporate the logic into an Immediately Invoked Function Expression (IIFE) and use return to output the values conditionally.

options={(() => {
  if (units === 'mm') return valuesMm;
  if (units === 'km') return valuesKm;
  return valuesLs;
})()}

Answer 2

This location seems like a perfect spot to break the norm and nest it - however, if nesting isn't your style, another approach is to incorporate the logic into an Immediately Invoked Function Expression (IIFE) and use return to output the values conditionally.

options={(() => {
  if (units === 'mm') return valuesMm;
  if (units === 'km') return valuesKm;
  return valuesLs;
})()}

Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

Answer №1

Similar questions

Determining the data type of an object key in Typescript

Adding an active class on a selected chat list item in Angular - here's how!

How to adjust text alignment and conceal cursor in TextField using React's material-ui

Angular - Issue with Function Observable<number> in Development

Ways to boost the smoothlife performance and framerate in p5js

Substitute a value in a list with a distinctive identification code

Guide to displaying an input box depending on the selection made in a Mat-Select component

The issue arises when the desired image size is not reflected correctly on the background after changing

The mock function will only be triggered if it is placed at the beginning of the file

How can you expand the class of a library object in Animate CC using Createjs?

Parentheses are automatically wrapped around the implicit return of arrow functions

Utilizing popperComponent Props in conjunction with useAutoComplete in Material UI ReactJS: A Comprehensive Guide

Prevent the action icon for Chip from being enabled in Material-UI

Create a Typescript generic function that can return a variety of data types including strings, numbers, and

Efficient Ways to Reduce Textfield Re-renders

The material UI styled component is not appearing as expected

How to easily enable or disable y-axis in Chart.js and customize their visibility

Tips for dynamically calling a property member of a function type in Typescript

An issue occurred during the construction of an angular project: The Tuple type '[]' with a length of '0' does not contain any elements at index '0'

Experimenting with Nuxtjs application using AVA and TypeScript