The ternary operator is malfunctioning when it comes to the condition

Question

The ternary operator is malfunctioning when it comes to the condition

I've encountered an issue while trying to integrate a custom MUI button into my project. My goal is to have the button enabled only when 2 specific objects are not empty, otherwise it should remain disabled. Despite my efforts, the code I've written is only partially effective.

My intention is to activate the button only when both conditions are met, however, it currently becomes enabled if just one condition is satisfied. It seems that the ternary operation is not recognizing the '&&' logical operator.

How can I address this challenge?

{Object.keys(userSelectDevicename).length === 0 && Object.keys(userSelectDevicecategory).length === 0 ? (
  <>
    {" "}
    <WsButton type="submit" size="small" variant="contained" disabled={bool}>
      Add
    </WsButton>
  </>
) : (
  <>
    {" "}
    <WsButton type="submit" size="small" variant="contained" disabled={!bool}>
      Add
    </WsButton>
  </>
)};

javascript reactjs material-ui

Answer 1

Answer №1

Each situation has two JSX elements that are identical. The only thing that changes is disabled={!bool}. While you could use a ternary operator for this, I prefer to take a different approach as shown below. This approach helps in keeping the code more organized by creating a function that determines the disabled state of the button.

export default function YourComponent(){

   function checkButtonState(){
      let lengthOne = Object.keys(userSelectDevicename).length
      let lengthTwo = Object.keys(userSelectDevicecategory).length

      if(lengthOne === 0 && lengthTwo === 0) return true
      else return false
   }
     
   return(
      <>
       {" "}
       <WsButton type="submit" size="small" variant="contained" disabled={!checkButtonState()}>
          Add
       </WsButton>
      </>
   ) 
}

Answer 2

Each situation has two JSX elements that are identical. The only thing that changes is disabled={!bool}. While you could use a ternary operator for this, I prefer to take a different approach as shown below. This approach helps in keeping the code more organized by creating a function that determines the disabled state of the button.

export default function YourComponent(){

   function checkButtonState(){
      let lengthOne = Object.keys(userSelectDevicename).length
      let lengthTwo = Object.keys(userSelectDevicecategory).length

      if(lengthOne === 0 && lengthTwo === 0) return true
      else return false
   }
     
   return(
      <>
       {" "}
       <WsButton type="submit" size="small" variant="contained" disabled={!checkButtonState()}>
          Add
       </WsButton>
      </>
   ) 
}

Answer 3

Answer №2

Place both conditions within parentheses to ensure correct evaluation. The && operator acts as a conditional operator, checking the

Object.keys(userSelectDevicename).length === 0

condition first. If it is true, the second half of the code will execute - represented by

(Object.keys(userSelectDevicecategory).length === 0) ? ....

By enclosing the conditions in parentheses, their priority increases and they are evaluated together before the ternary operator makes a decision based on the combined result.

 {(Object.keys(userSelectDevicename).length === 0 && Object.keys(userSelectDevicecategory).length === 0) ? (
                          <>
                            {" "}
                            <WsButton type="submit" size="small" variant="contained" disabled={bool}>
                              Add
                            </WsButton>
                          </>
                        ) : (
                          <>
                            {" "}
                            <WsButton type="submit" size="small" variant="contained" disabled={!bool}>
                              Add
                            </WsButton>
                          </>
                        )}

Answer 4

Place both conditions within parentheses to ensure correct evaluation. The && operator acts as a conditional operator, checking the

Object.keys(userSelectDevicename).length === 0

condition first. If it is true, the second half of the code will execute - represented by

(Object.keys(userSelectDevicecategory).length === 0) ? ....

By enclosing the conditions in parentheses, their priority increases and they are evaluated together before the ternary operator makes a decision based on the combined result.

 {(Object.keys(userSelectDevicename).length === 0 && Object.keys(userSelectDevicecategory).length === 0) ? (
                          <>
                            {" "}
                            <WsButton type="submit" size="small" variant="contained" disabled={bool}>
                              Add
                            </WsButton>
                          </>
                        ) : (
                          <>
                            {" "}
                            <WsButton type="submit" size="small" variant="contained" disabled={!bool}>
                              Add
                            </WsButton>
                          </>
                        )}

The ternary operator is malfunctioning when it comes to the condition

Answer №1

Answer №2

Similar questions

How come I am unable to save an array of objects in a State within React JS?

Stop Browsers from Saving the Current Page in the History Log

Unusual behavior of Typescript with Storybook's addon-docs

Failing to send contact information using JSON in PHP

User interface for modifying options in a dropdown menu

Error: 'delay' is not recognized as a valid function

retrieving attribute values from JSON objects using JavaScript

What steps should I take to resolve issues with the npm installation on Linux?

Error in Compiling HTML Elements Collection<<Element>

Strategies for resolving duplicate jQuery code in my project

Assistance with JavaScript Regular Expressions for formatting BBCode

Retrieving information from PHP using AJAX

Issue with `styles` argument after updating from Material version 4 to 5: MUI

Retrieve information about the clicked item using the Backbone framework

Trouble with Styling React-Toastify in TypeScript: struggling to adjust z-index in Toast Container

Creating a promise in an AngularJS factory function to perform an operation

What is the more efficient approach: retrieving all data in one request or making individual requests for each piece?

React Tabulator - custom header filter for select column - hide 'X' option

In the realm of JavaScript, the localeCompare() string method is more than willing to accept the presence of 'undefined' as a valid parameter for 'locale', while opting to outright reject any instance of

Unleashing the power of creativity: Crafting distinctive keys for React elements