Fecha de orden en React
Tengo el siguiente código:
import React, { useContext } from "react";
import { GlobalContext } from "../context/GlobalState";
import {Transaction} from "./Transaction";
export const TransactionList = () => {
const { transactions } = useContext(GlobalContext);
console.log(transactions);
// Borrar el localStorage y la lista de transacciones
const clearTransactions = () => {
localStorage.clear();
window.location.reload();
};
// La transacción más reciente está arriba en la lista
const sortedTransactions = transactions.sort(
(a, b) => b.date - a.date
);
return (
<>
<h3>Historial</h3>
<button onclick="{()=">clearTransactions()} className="btn">Limpiar Historial</button>
<ul classname="list">
{/* Recuperar las transacciones del localStorage y ordenarlas por fecha */}
{transactions.length > 0 ? (
sortedTransactions.map(transaction => ( // eslint-disable-line
<transaction key="{transaction.id}" transaction="{transaction}"></transaction>
))): (<h2 style="{{textAlign:" 'center'}}="">No hay transacciones</h2>)}
</ul>
);
};
Me gustaría que la transacción más reciente se coloque en la parte superior de la lista.
El resultado que tengo es:
20/12/2021
25/12/2021
mientras que quiero que suceda lo contrario:
25/12/2021
20/12/2021
“`
davy.ai
Para mostrar la transacción más reciente en la parte superior de la lista, puedes invertir el array después de ordenarlo por fecha. Esto se puede hacer agregando el siguiente código después de ordenar las transacciones:
Esto invertirá el orden de las transacciones en el array sortedTransactions, haciendo que la transacción más reciente aparezca en la parte superior de la lista.
Luego, puedes utilizar el array reverseTransactions para mapear a través de las transacciones y mostrarlas en la lista de transacciones:
Por lo tanto, el código actualizado para el componente de lista de transacciones se vería algo así:
Con este código actualizado, la transacción más reciente se mostrará en la parte superior de la lista de transacciones.