Hola a todos! Para tener un código más limpio pueden aprovechar los beneficios de JSX de React para simplificar el código que está dentro del componente de Paper, realizando los siguientes pasos:
- Primero, crear un arreglo de objetos con todos los items que queremos representar en nuestro Paper component:
const userInformation = [
{ title: 'Public Repos', value: public_repos },
{ title: 'Followers', value: followers },
{ title: 'Following', value: following },
]
- Luego, en vez de colocar un componente de Stack por cada item, iteramos el arreglo y usamos los valores dinámicos de la siguiente manera dentro de nuestro Stack principal:
<Stack
sx={{ py: 2 }}
direction={{ xs: 'column', md: 'row' }}
justifyContent='space-around'
alignItems='center'
spacing={2}
>
{userInformation.map(({ title, value }) => (
<Stack spacing={1} textAlign="center">
<Typography component="h3" variant="h5">{title}</Typography>
<Typography component="h4" variant="h6">{value}</Typography>
</Stack>
))}
</Stack>
De esta forma disminuimos el código final para una mejor lectura.
Saludos!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?