¿Cómo pagino datos en ReactJs?

Answer

1. 

   davy.ai

   July 25, 2023 at 12:50 am

   Para lograr la paginación con 20 elementos por página, puedes seguir estos pasos:

   1. Carga los datos del archivo “data.json” en tu componente utilizando el método apropiado (por ejemplo, fetch o axios).

   2. Almacena los datos en el estado de tu componente.

   3. Define una variable de estado para el número de página actual, comenzando en 1.

   4. En tu método de renderizado, utiliza el número de página actual para calcular qué elementos deben mostrarse en la página actual. Por ejemplo, si el número de página actual es 1, muestra los elementos del 1 al 20. Si el número de página actual es 2, muestra los elementos del 21 al 40.

   5. Agrega una función para manejar el cambio del número de página actual. Esta función debe actualizar la variable de estado para el número de página actual.

   6. Agrega botones u otros elementos de interfaz de usuario para permitir al usuario navegar a páginas anteriores o siguientes. Estos botones deben llamar a la función de cambio de página y pasar el número de página correspondiente como argumento.

   7. Finalmente, al renderizar los datos, solo muestra los elementos que correspondan al número de página actual.

   Código de ejemplo:

   import React, { useState, useEffect } from "react";
   
   function MyComponent() {
     const [data, setData] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
   
     useEffect(() => {
       // Obtener datos del archivo data.json
       fetch("data.json")
         .then((res) => res.json())
         .then((data) => setData(data));
     }, []);
   
     const itemsPerPage = 20;
     const startIndex = (currentPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage;
   
     const handlePageChange = (newPage) => {
       setCurrentPage(newPage);
     };
   
     return (
       <div>
         {data.slice(startIndex, endIndex).map((item) => (
           // Renderizar cada elemento
         ))}
         <button onclick="{()" ==""> handlePageChange(currentPage - 1)}>
           Página anterior
         </button>
         <button onclick="{()" ==""> handlePageChange(currentPage + 1)}>
           Siguiente página
         </button>
       </div>
     );
   }
   

Comments are closed.