I'm trying to display 3 different styles based on coditions but I cant do it using ternary expression. I've found some solutions here but still having some trouble with it.
The following conditions are the one I wanted to do:
<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>
Cause when I tried the following code, I received Do not nest ternary expressions. 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'}} /> : ""}
I think that best readable solution is this:
<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>
Or you can nest the conditions:
<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>