Do not nest ternary expressions - Way to change between 3 styles based on coditions

Question

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'}} /> : ""}

score 1 · Accepted Answer · answered Oct 29 '21 at 07:58

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>

The first solution solved my problem, thank you! But not the second solution which is to nest the conditions, what does `<>` and `>` means in that? — Leo, Oct 29 '21 at 08:13

Do not nest ternary expressions - Way to change between 3 styles based on coditions

1 Answers1