Estoy tratando de mostrar 3 estilos diferentes basados en codiciones, pero no puedo hacerlo usando una expresión ternaria. He encontrado algunas soluciones aquí , pero todavía tengo algunos problemas.
Las siguientes condiciones son las que quería hacer:
<div className={styles.extraContainer}> { (() => { if (!opened && !followed ) <div id={styles.themeBox}><p>+10</p></div> //show this box else if (opened && !followed) <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> //show this icon else "" //show nothing })() } </div>Porque cuando probé el siguiente código, recibí No anidar expresiones ternarias. error.
{!opened && !followed ? <div id={styles.themeBox}><p>+10</p></div> : (opened && !followed ? <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> : ""}Creo que la mejor solución legible es esta:
<div className={styles.extraContainer}> {!opened && !followed && <div id={styles.themeBox}><p>+10</p></div> //show this box } {opened && !followed && <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> //show this icon } </div>O puede anidar las condiciones:
<div className={styles.extraContainer}> {!followed && <> {!opened && <div id={styles.themeBox}><p>+10</p></div> //show this box } {opened && <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> //show this icon } </>} </div>