EnzyWeiss EnzyWeiss - 1 year ago 56
React JSX Question

Inverse sort in table

I've got function which render table rows with gradual

id
.How to inverse it? (first row with
id=n
, last with 1)

thats my code

renderRows = () => {
const { receipts } = this.props
const rows = receipts.map((receipt, index) => (
<tr key={index}>
<td>{receipt.id}</td>
<td >{receipt.organization.name}</td>
<td>{receipt.receiptNumber}</td>
<td>{receipt.series}</td>
<td>{receipt.customer.fname}</td>
<td>{receipt.customer.lname}</td>
<td>{receipt.customer.patronymic}</td>
<td>{receipt.customer.phone}</td>
<td>
{receipt.priceList.map((priceListEntry, index) =>
<div key={index}>
{priceListEntry.service.name}
</div>
)}
</td>
</tr>);
return (rows);
}

Answer Source

You can use javascript sort function : DOC

renderRows = () => {
    let receipts = this.props.receipts
    receipts.sort(function(a,b){ return b.id - a.id})
    const rows = receipts.map((receipt, index) => (
      <tr key={index}>
        <td>{receipt.id}</td>
        <td >{receipt.organization.name}</td>
        <td>{receipt.receiptNumber}</td>
        <td>{receipt.series}</td>
        <td>{receipt.customer.fname}</td>
        <td>{receipt.customer.lname}</td>
        <td>{receipt.customer.patronymic}</td>
        <td>{receipt.customer.phone}</td>
        <td>
          {receipt.priceList.map((priceListEntry, index) =>
            <div key={index}>
              {priceListEntry.service.name}
            </div>
          )}
        </td>
     </tr>);
   return (rows);
 }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download