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.
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.