React bakiye geçmişi

ubeydullah26 797 gün önce

344 defa görüntülendi

Geliştirdiğim projenin muhasebe bölümünde hesaba gelen ve çıkan paraların
hareketlerini tutuğum bir tablo var. Bunu table'da sıkıntısız gösteriyorum.
İstediğim şey bu hareketlerin bakiyeye nasıl etki ettiğinide göstermek.

Tablomun şu şekilde olmasını istiyorum.

Tutar	Bakiye
600	6450
250	5850
-900	5600
6500	6500

<table className="table text-wrap">
  <thead>
    <tr>
      <th>Tarih</th>
      <th>Tip</th>
      <th>Firma</th>
      <th>Açıklama</th>
      <th>Tutar</th>
      <th>Bakiye</th>
    </tr>
  </thead>
  <tbody>
    {transactions.map((item) => {
      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></td>
        </tr>
      );
    })}
  </tbody>
</table>;

react

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

tayfunerbilen

796 gün önce

mantık şöyle olmalı, bakiyeyi tuttuğun bir değerin olduğunu düşünüyorum. örneğin şöyle bir şeyde tutulsun şimdilik;

const balance = 6000

loop'da index değerini de dahil edip eğer index değeri 0 değilse bir önceki elemanı index - 1 ile seçip onun değerini balance'dan çıkarmak olacak. yani;

<table className="table text-wrap">
  <thead>
    <tr>
      <th>Tarih</th>
      <th>Tip</th>
      <th>Firma</th>
      <th>Açıklama</th>
      <th>Tutar</th>
      <th>Bakiye</th>
    </tr>
  </thead>
  <tbody>
    {transactions.map((item, key) => {
      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(key !== 0 ? balance - transactions[key - 1].document_total : balance)}
          </td>
        </tr>
      );
    })}
  </tbody>
</table>;

çalışan bir örnek: https://codesandbox.io/s/icy-tdd-l1mpdj?file=/src/App.js

#011046

ubeydullah26

796 gün önce


{
  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.

#011049