Mi objetivo es crear una paginación en mi aplicación. Quería probar si renderizaría la tabla con las 10 filas, usando slice y map. El problema es que no puedo renderizar mi tabla. No aparecen errores en la consola. Lo hice de acuerdo con el siguiente código:
Obs: La fecha de retorno es una matriz de objetos.
import { Container } from "./styles" import ReactPaginate from "react-paginate" import { useState } from "react" import data from "../../data/data.json" export const BillingList = () => { const [stores, setStores] = useState(data.stores.slice(0, 50)) const [pageNumber, setPageNumber] = useState(0) const storesPerPage = 10 const pagesVisited = pageNumber * storesPerPage return ( <Container> <table> <thead> <tr> <th>Loja</th> <th>Faturamento</th> </tr> </thead> <tbody> {stores.slice(pagesVisited, pagesVisited + storesPerPage) .map((store) => { <tr> <td>{store.name}</td> <td>{store.revenue}</td> </tr> })} </tbody> </table> </Container> ) }El problema está en la función .map() . No necesita hacer { } y en su lugar ( ).
Hazlo así:
<tbody> {stores.slice(pagesVisited, pagesVisited + storesPerPage) .map((store) => ( <tr> <td>{store.name}</td> <td>{store.revenue}</td> </tr> ))} </tbody>Razón:
() => {return 'someValue';}es igual a
() => ('someValue')Puedes acercarte a cualquiera de ellos. Agregar paréntesis de retorno o cambio.
En el cuerpo de la tabla, falta "regresar" mientras usa el mapa (siempre que use llaves con la función de mapa, el contenido no regresa automáticamente, debe regresar manualmente); Agregue retorno en la función de mapa
let tempArray=[1,2,3,4,5] //Issue in above mentioned problem let res=tempArray.map((element)=>{ element}) console.log("Map map does not return anything",res) //SOLUTIONS //Solution 1 res=tempArray.map((element)=>element) console.log("Map funtion without {}",res) //Solution 2 res=tempArray.map((element)=>{return element}) console.log("Map funtion with {} now we have to add return",res)