{
  transactions.map((item) => {
    arr.push(item.document_total);
    return (
      <tr key={item.id}>
        <td>{item.document_date}</td>
        <td>{item.document_type}</td>
        <td>{item.interlocutors_label}</td>
        <td>{item.description}</td>
        <td>
          {readableMoneyFormat(item.document_total)} {props.detail.currency}
        </td>
        <td>
          {readableMoneyFormat(
            arr.reduce((acc, prev) => {
              return parseFloat(acc) + parseFloat(prev);
            }, 0)
          )}{" "}
          {props.detail.currency}
        </td>
        <td className="text-center">
          <a
            className="cursor-pointer"
            onClick={() => {
              deleteTransaction(item.id);
            }}
          >
            <i className="fal fa-trash-alt me-2"></i>
          </a>
        </td>
      </tr>
    );
  });
}

reduce kullanarak istediğimi yaptım sonunda. Ama bakiye toplama işlemini sizin cevapta da benim cevapta da yukarıdan aşağı doğru yapıyor. Bunu aşağıdan yukarıya doğru yapmak istesek mümkün müdür acaba? Ben gelen veriyi desc den asc olacak şekilde yeniden düzenledim daha fazla uğraşmamak için.