How to write in jsx if under if?

Admin 1
Viewed 38

I want to write like this in my jsx, but i dont know how to.

if(condition){
  if(condition){
  }else{

  }
}

How can i write like that in jsx? thanks for the help.

        {canDelete === 1 && //first if
          {u.status === 'Active' ?( //second if
            <Tooltip>Deactivate</span>} arrow>
              <IconButton 
                  className={classes.deactivateButton}
              >  
              <HighlightOffIcon />
              </IconButton>
            </Tooltip>
            ):(  //else
            <Tooltip>Activate</span>} arrow>
              <IconButton 
                  className={classes.activateButton}
              >  
              <CheckCircleOutlineIcon />
              </IconButton>
            </Tooltip>
            )
          }
        }
jsx reactjs
2 Answers

You can add jsx fragment <></> in every if statement

{canDelete === 1 && 
    <>
    {u.status === 'Active' ?
        ( 
            <Tooltip>Deactivate</span>} arrow>
                <IconButton 
                    className={classes.deactivateButton}
                >  
                    <HighlightOffIcon />
                </IconButton>
            </Tooltip>
        ):(
            <Tooltip>Activate</span>} arrow>
                <IconButton 
                    className={classes.activateButton}
                >  
                    <CheckCircleOutlineIcon />
                </IconButton>
            </Tooltip>)
        }
    </>
}
user_53090840 
        {canDelete === 1 ?
          u.status === 'Active' ? (
            <Tooltip>Deactivate</span>} arrow>
              <IconButton 
                  className={classes.deactivateButton}
              >  
              <HighlightOffIcon />
              </IconButton>
            </Tooltip>
            ) : (
            <Tooltip>Activate</span>} arrow>
              <IconButton 
                  className={classes.activateButton}
              >  
              <CheckCircleOutlineIcon />
              </IconButton>
            </Tooltip>
            )
          : (<></>)
        }

Something like that should work. You shouldn't do another {, it's just a way to sort of escape from the JSX, so one is enough. Now you can do two inner ternary operators chained. It's not very clean, but should work.

user_59340600
Related