Why callback is used as condition in ternary operator for Material UI Dialog component?-CodePudding

I am trying to recreate Material UI Customized Dialog component according to this section of documentation and I can't understand why callback function onClose condition is used to display IconButton component in DialogTitle:

<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
      {children}
      {onClose ? (
        <IconButton
          aria-label="close"
          onClick={onClose}
          sx={{
            position: 'absolute',
            right: 8,
            top: 8,
            color: (theme) => theme.palette.grey[500],
          }}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </DialogTitle>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

As far as I understand the IconButton is always rendered if you set up state correctly. I just wonder is there a specific reason or pattern to use onClick callback function inside ternary operator? I tried to remove ternary operator altogether and everything works the same.

CodePudding user response：

Well the button loses all its purpose if there is no onClose function, I mean its whole point is to run that callback. So if there is no callback then don't display the button.