How to write in jsx if under if?

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>
            )
          }
        }

Answer

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>)
        }
    </>
}