No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creando el componente con las estadísticas del usuario

19/24
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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:

  1. 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 },
]
  1. 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!

src/components/PaperInformation/index.js:

import { Paper, Stack, Typography } from "@mui/material";
import React from "react";

const PaperInformation = (props)=> {
    const { userState } = props
    const { public_repos, followers, following } = userState


    return (
        <>
            <Paper elevation={3}>
                <Stack>
                    <Stack>
                        <Typography>Repos</Typography>
                        <Typography>{public_repos}</Typography>
                    </Stack>
                    <Stack>
                        <Typography>Followers</Typography>
                        <Typography>{followers}</Typography>
                    </Stack>
                    <Stack>
                        <Typography>Following</Typography>
                        <Typography>{following}</Typography>
                    </Stack>
                </Stack>
            </Paper>
        </>
    )
}

export default PaperInformation

Complementando el comentario de @Ronald Benito Abu Saleh Boscán también podrían:
.

  1. Crear un objeto con los elementos a enlistar donde la clave es el título y el valor de cada clave es el dato obtenido.
  const paperInfo = {
    repositories: publicRepos,
    followers: followers,
    following: following,
  };
  1. Usar el método Object.entries() para generar un array de arrays con cada elemento del objeto y luego mapear este array resultante renderizando cada elemento de la lista.
        Object.entries(paperInfo).map((item) => (
          <Stack
            key={`Info_${item[0]}`}
            sx={{
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Typography
              variant="h6"
              color={(t) => t.palette?.text?.primary}
              sx={{ textTransform: 'capitalize' }}
            >
              {item[0]}
            </Typography>
            <Typography variant="h4" color={(t) => t.palette?.primary?.main}>
              {item[1]}
            </Typography>
          </Stack>
        ))