¿Cuál es la mejor forma de práctica para escribir ternario dentro de ternario como en mi código de ejemplo? Quiero que el código sea más legible y correcto y quiero saber la forma correcta de escribirlo.
<TouchableOpacity style={ darkMode ? filterState === 'A' ? styles.activeButtonDark : styles.buttonDark : filterState === 'A' ? styles.activeButton : styles.button } > </TouchableOpacity> <TouchableOpacity style={ darkMode ? filterState === 'B' ? styles.activeButtonDark : styles.buttonDark : filterState === 'B' ? styles.activeButton : styles.button } > </TouchableOpacity>Ternario anidado dentro de ternario nunca será un buen enfoque, en cuanto a la legibilidad
rather than this you can try with : const darkModeStyle = (filterState) => { return filterState === 'A' ? styles.activeButtonDark : styles.buttonDark } const lightModeStyle = (filterState) => { return filterState === 'A' ? styles.activeButton : styles.button } style = { darkMode ? darkModeStyle(filterState) : lightModeStyle(filterState) }Este sigue siendo un mejor enfoque, o puede usar SwitchCase o, si no, en una función separada.
Espero eso ayude. siéntase libre de dudas
EDITAR:
Si otra cosa para ser así
const styleGenerator = (darkMode = false, filterState = "A") => { if (darkMode) { if (filterState === 'A') { return styles.activeButtonDark } if (filterState === 'B') { return styles.stylesNew } return styles.buttonDark } else { if (filterState === 'A') { return styles.activeButton } if (filterState === 'B') { return styles.newStyle } return styles.button } } style = { styleGenerator(darkMode, filterState) }