es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Fecha de orden en React

25 Jul, 2023 Programación

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

“`

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    const reverseTransactions = sortedTransactions.reverse();

    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:

    {reverseTransactions.map(transaction => (
  <transaction key="{transaction.id}" transaction="{transaction}"></transaction>
))}

    Por lo tanto, el código actualizado para el componente de lista de transacciones se vería algo así:

    import React, { useContext } from "react";
import { GlobalContext } from "../context/GlobalState";
import { Transaction } from "./Transaction";

export const TransactionList = () => {
  const { transactions } = useContext(GlobalContext);

  // Ordenar las transacciones por fecha e invertir el array
  const sortedTransactions = transactions.sort((a, b) => b.date - a.date);
  const reverseTransactions = sortedTransactions.reverse();

  const clearTransactions = () => {
    localStorage.clear();
    window.location.reload();
  };

  return (
    <>
      <h3>Historial</h3>
      <button onclick="{()" ==""> clearTransactions()} className="btn">
        Borrar Historial
      </button>
      <ul classname="list">
        {reverseTransactions.map(transaction => (
          <transaction key="{transaction.id}" transaction="{transaction}"></transaction>
        ))}
        {transactions.length === 0 && (
          <h2 style="{{" textalign:="" "center"="" }}="">No hay transacciones</h2>
        )}
      </ul>

  );
};

    Con este código actualizado, la transacción más reciente se mostrará en la parte superior de la lista de transacciones.

Comments are closed.