davidkrdona davidkrdona - 1 month ago 12
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 = ({
itemFromPage,
BBDDCustomer
}) => {
console.log({BBDDCustomer});
const renderRows = BBDDCustomer.data.map((customer, customerIndex) => { //how to slice this array
return (
<tr key={customerIndex}>
<td>{BBDDCustomer.data[customerIndex].name}</td>
<td>{BBDDCustomer.data[customerIndex].address}</td>
<td>{BBDDCustomer.data[customerIndex].postalCode}</td>
<td>{BBDDCustomer.data[customerIndex].city}</td>
<td>{BBDDCustomer.data[customerIndex].country}</td>
<td>{BBDDCustomer.data[customerIndex].telephone}</td>
<td>{BBDDCustomer.data[customerIndex].email}</td>
<td><input type="checkbox" id="customerIndex" value="mod"/></td>
<td><input type="checkbox" id="customerIndex" value="Del"/></td>
</tr>
);
});
return (
<div>
<Table>
</div>
);
};


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

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.

Comments