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,
                        ]
                  }

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the data type of an object key in Typescript

Is there a way to limit the indexed access type to only return the type of the key specified? interface User { id: string, name: string, age: number, token: string | null, } interface Updates<Schema> { set: Partial<Record< ...

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

We are currently developing a chat component where users can click on the left side chat item to open messages with the selected user. We have implemented an active class that changes the color of the selected chat list item. Our goal is to apply the activ ...

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

Is there a way to make a Material-ui TextField read-only without disabling it, while also aligning the text to center and hiding the cursor? style={{ textAlign: 'center', cursor: 'none' }} I have tried using this code but it doesn&apo ...

Angular - Issue with Function Observable<number> in Development

Currently, I'm working on writing TypeScript code for a component. Within this TypeScript class, I have created a function that is meant to return a number representing the length of an array. My goal is to have this function work like an Observable. ...

Ways to boost the smoothlife performance and framerate in p5js

I have a NextJS project using p5js deployed on . This project is an implementation of , which involves a cellular automata generalized on a continuous domain. Currently, it runs at around 10 to 14 frames per second and I aim to increase this. You can fin ...

Substitute a value in a list with a distinctive identification code

I have a list of dailyEntries. Each entry has a unique identifier called id. I am given an external dailyEntry that I want to use to replace the existing one in the array. To achieve this, I can use the following code: this.dailyEntries = this.dailyEntri ...

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

I am working on a mat-select component that offers two options: Individual Customers and Organizational Customers. When selecting Individual Customers, the dropdown should display three options: First Name, Last Name, and Customer Id. However, when choosin ...

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

I've been working on a basic image slideshow where the background image changes based on user selection. However, I've noticed that when I change the image for the first time, the backgroundSize: cover property seems to disappear. Even if I try c ...

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

In an attempt to simulate a React function component for the purpose of validating the properties passed to it, I encountered an interesting difference in behavior. When the mock is placed at the top of the file, everything works as expected: const mockTra ...

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

I am currently in the process of migrating a large flash application to canvas using Typescript, and I'm facing challenges when it comes to utilizing classes to extend library objects. When working with a class library for buttons, class BtnClass { ...

Parentheses are automatically wrapped around the implicit return of arrow functions

Currently, I am utilizing Visual Studio Code along with Prettier, and I have noticed that the function: (token: string) => this.token = token is being transformed into: (token: string) => (this.token = token) This modification seems to decrease r ...

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

Is there a way to adjust the position of popper using useAutocomplete instead of autocomplete? ...

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

I'm looking to remove the (x) option for each chip, without disabling the entire component. Implementing disabled property disables the whole component. https://i.stack.imgur.com/wQGJY.png Any ideas on how I can achieve this? Following Paven's ...

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

I have a function written in Typescript and I am looking to determine the return type based on the value retrieved from process.env. For instance, the variables in my Node process.env can be strings, numbers, or booleans. I want to fetch them with their s ...

Efficient Ways to Reduce Textfield Re-renders

One issue that has caught my attention is the fact that every component within the same parent element (App in the example below) seems to rerender when unrelated states/props change, causing noticeable slowdown in the page/forms. Despite following variou ...

The material UI styled component is not appearing as expected

I'm having trouble getting the MUI styled() utility to apply styles to <MyComponent>Styled div</MyComponent> in my index.jsx file. Any ideas why? import Button from '@mui/material/Button' import Grid from '@mui/mater ...

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

My Situation: Once the canvas is generated, I want to have a blank canvas area with no curves and no y-axis - surprisingly, it's working as expected. Starting View: https://i.sstatic.net/TzaTd.png Desired Outcome: When I click on a label (like Da ...

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

How can I determine if a member is a function in TypeScript? Is dynamic typing discouraged in TypeScript? function checkIfFunction<T, K extends keyof T>(obj: T, propName: K) { if (typeof obj[propName] === "function") { obj[p ...

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'

When I run the command ng build --prod, I encounter the following error: ERROR in src/app/inventory/inv-parts-main-table/dialog-component/dialog-component.component.html(5,16): Tuple type '[]' of length '0' has no element at index &apo ...

Experimenting with Nuxtjs application using AVA and TypeScript

I'm in the process of developing a Nuxt application using TypeScript and intend to conduct unit testing with AVA. Nonetheless, upon attempting to run a test, I encounter the following error message: ✖ No test files were found The @nuxt/typescrip ...