Estoy tratando de agregar un botón personalizado creado por MUI a mi proyecto. Quiero habilitar mi botón si 2 objetos no están vacíos, de lo contrario, el botón permanece deshabilitado. He escrito un código que funciona la mitad correctamente.
Solo quiero habilitar mi botón si se cumplen 2 condiciones. Pero el botón se habilita solo cuando una condición cumple con los criterios. La operación ternaria no acepta la condición &&.
¿Cómo puedo abordar este problema?
{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> </> )};Agregue ambas condiciones dentro de corchetes pequeños. && funciona primero como un operador condicional y solo verificará Object.keys(userSelectDevicename).length === 0 primero solo si es cierto en función de ello. Se correrá la 2da mitad. Ese es el código de Object.keys(userSelectDevicecategory).length === 0) ? ....
al agregar los corchetes, la prioridad de los corchetes será más y la condición se evaluará como un todo y luego el operador ternario se activará según el resultado de las condiciones.
{(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> </> )}Tienes dos JSX idénticos en cada caso. El factor de cambio es disabled={!bool} . Puede usar el operador ternario para esto, pero yo haría algo diferente, como a continuación. Para hacer el código más limpio. Que es crear una función que devuelva el estado booleano deshabilitado del botón.
export default function YourComponent(){ function getBool(){ let lengthOne = Object.keys(userSelectDevicename).length let lenghtTwo = Object.keys(userSelectDevicecategory).length if(lengthOne === 0 && lengthTwo === 0) return true else return false } return( <> {" "} <WsButton type="submit" size="small" variant="contained" disabled={!getBool()}> Add </WsButton> </> ) }