I'm aiming to build a pagination in my application. I wanted to test if I would render the table with the 10 rows, using slice and map. The problem is that I am not able to render my table. No errors appear in the console. I did it according to the code below:
Obs: The date return is an array of objects.
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>
)
}
The problem is in the .map() function. You don't need to do { } and instead to ( ).
Do like this:
<tbody>
{stores.slice(pagesVisited, pagesVisited + storesPerPage)
.map((store) => (
<tr>
<td>{store.name}</td>
<td>{store.revenue}</td>
</tr>
))}
</tbody>
Reason:
() => {return 'someValue';}
is equal to
() => ('someValue')
You can approach either of them. Add return or change parenthesis.
In table body you are missing "return" while using map (whenever you use curly brace with map function the content does not return automatically you have to return manually); Please add return in map function
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)