• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

201
Vistas
What is the best approach to writing resuable modals in React?

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 ?

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

An approach I've used before is to wrap all this in a Context, then provide custom hooks with useContext() to modify the state. That way, you can update the props from anywhere in the code.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda