0

Estoy tratando de usar el componente paginacion de material ui en React pero no entiendo muy bien la documentacion, no se como seleccionar los items o objetos que se van a paginar.

nisiquiera se como inicar lo unico que he intentado es esto pero se que no funciona asi.

PD: TarjetaServicios es un componente que renderiza una tarjeta. quiero mostrar 3 tarjetas y en la siguiente pagina otras 3 y asi.

 <Pagination count={10}>
    <Grid container spacing={1}>
       <Grid item xs={12} sm={12} md={6} lg={4} xl={4}>
          <TarjetaServicios NombreEmpresa='Clases de manejo'></TarjetaServicios>
                        </Grid>
        <Grid item xs={12} sm={12} md={6} lg={4} xl={4}>
          <TarjetaServicios NombreEmpresa='Clases de Ingles'></TarjetaServicios>
                        </Grid>
        <Grid item xs={12} sm={12} md={6} lg={4} xl={4}>
          <TarjetaServicios NombreEmpresa='Servicio de limpieza'></TarjetaServicios>
                        </Grid>
                    </Grid>
                    </Pagination>
4
  • Bienvenido a S.O. Español, Por favor compartenos el código de lo que has intentado, ¿Cómo preguntar?
    – g.4
    Commented el 23 ago. 2021 a las 16:07
  • 1
    Hola, he añadido lo unico que he intentado. Commented el 23 ago. 2021 a las 16:29
  • puedes agregar el link de la documentación en la que estas basando por favor?
    – Richard
    Commented el 23 ago. 2021 a las 16:41
  • 1
    material-ui.com/components/pagination Commented el 23 ago. 2021 a las 17:28

1 respuesta 1

1

Te adjunto un ejemplo básico ya que al parecer quieres colocar datos "quemados".

const pagination = {
    1: [
      {
        name: 'Clases de manejo',
      },
      {
        name: 'Clases de Inglés',
      },
      {
        name: 'Servicio de limpieza',
      },
    ],
    2: [
      {
        name: 'Pagina 2 - Nombre 1',
      },
      {
        name: 'Pagina 2 - Nombre 2',
      },
      {
        name: 'Pagina 2 - Nombre 3',
      },
    ],
  };

  const [page, setPage] = useState(1);

  const handleChange = (event, value) => {
    setPage(value);
  };

JSX:

<Grid container spacing={1}>
    {pagination[page].map((pag) => (
        <Grid item xs={12} sm={12} md={6} lg={4} xl={4}>
          <TarjetaServicios NombreEmpresa={pag.name} />
        </Grid>
      ))}
 </Grid>
 <Pagination count={2} page={page} onChange={handleChange} />

El count corresponde al número de páginas que quieres que tenga.

Para hacerlo más dinámico podrías hacer esto

const count = Object.keys(pagination).length

Y lo reemplazas

<Pagination count={count} page={page} onChange={handleChange} />

Nota: Cuando el componente no debería tener nada en medio (children), no es necesario que lo cierres con el mismo, basta con algo como:

<TarjetaServicios></TarjetaServicios> // NO
<TarjetaServicios /> // RECOMENDABLE
2
  • podrias explicarme como funciona? es que exactamente no se como es que funciona, lo quiero hacer con un array de objetos y no me da Commented el 1 sept. 2021 a las 19:04
  • tienes que tener separado ello por página o index, así como te mostré en el ejemplo del const pagination. La paginación simplemente se encarga de actualizar el número en el state y ese número es el que indica el index en el objeto de pagination. Separa tu array de objetos así como te mostré en el ejemplo y te debería de funcionar.
    – ScriptKash
    Commented el 5 sept. 2021 a las 18:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.