davidkrdona davidkrdona - 10 months ago 42
React JSX Question

Need to find the way to slice this array to show only n customers

So , i basically want to show only 5 customer per page, i'll later add a pagination bar but at the moment i want to show only 5 customer, i have tried to slice after the map function, but im kinda new to react and redux and im not sure if that's the way.

const Setting = ({
}) => {
const renderRows = BBDDCustomer.data.map((customer, customerIndex) => { //how to slice this array
return (
<tr key={customerIndex}>
<td><input type="checkbox" id="customerIndex" value="mod"/></td>
<td><input type="checkbox" id="customerIndex" value="Del"/></td>
return (

This is the format file where the customer are:

const BBDDCustomer = {
ui_labels: {
name: 'Name',
address: 'address',
postalCode: 'Postal Code',
city: 'City',
country: 'Country',
telephone: 'Telephone',
email: 'Email',
modified: 'Modified',
delete: 'Delete'
data: [
name: 'n1',
address: 'a1',
postalCode: 'PC 1',
city: 'c 1',
country: 'cou 1',
telephone: 'tel 1',
email: 'em 1'

Answer Source

It is better to get a sub-array and render it than render the whole array and get a sub-array.

There is a standard Javascript slice(from, count?) method to get a part of array, first parameter tells the index to start with, second optional parameter is the number of elements to be included

You would use it like so:

const renderRows = BBDDCustomer.data.slice(0, 5).map((customer, customerIndex) => { ... };

It would return first 5 elements which you would map with your array function.