I am writing an application in React + Material UI. There are actions on different pages in my application that use Modals and instead of using Material UI's Dialog on each of these pages, I have defined a global modal context that changes state to show and fills the modal with other props. Now my question is - what is the standard practice to rendering those props ? As in, at what point should I decide to create a separate modal/dialog for lets say forms as compared to simple actions ? Or is it correct if I use conditions to render anything and everything from within that one Modal ? As an example consider the following sample:
<DialogContent>
<DialogContentText>
{modalTypeDefaults.text}
</DialogContentText>
<DialogContentText sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: '5px'
}}>
{
(modalTypeDefaults.type === 'user')
? <UserInfoCellComponent displayName={modalProps.displayName} imageURL={modalProps.fkImageIdAvatar} username={modalProps.username.toLowerCase()} />
: (modalTypeDefaults.type === 'post')
? <Box>
<Typography>Title: {modalProps.title.toUpperCase()}</Typography>
<Typography>Id: {modalProps.id}</Typography>
</Box>
: (modalTypeDefaults.type === 'event')
? <Box
sx={{
alignItems: 'center',
display: 'flex'
}}
>
<Avatar
src={modalProps.fkImageId}
sx={{ mr: 2 }}
/>
<Typography
color="textPrimary"
variant="body1"
>
<a href={modalProps.urlWebsite}>{modalProps.name}</a>
</Typography>
</Box>
: ''
}
</DialogContentText>
</DialogContent>
Are there standard practices ? I have looked around and found extremely variable answers. What is better for performance ?