How to calculate my transactions according to ID?

Question

I have an application that is an expense tracker simulation.

What I need to do is to calculate my transactions according to the UUID of the account that I pass when registering a new transaction.

At the moment, all my calculations are being saved in the same account. How do I correctly group and calculate my transactions?

The project has a lot of files, so I put it on the codesandbox.io

In the image, you can see that I made 4 transactions, with 3 different accounts, but the calculations are done as if there was a single account

My ContextApi:

import React from "react";
import PropTypes from "prop-types";

const AppContext = React.createContext();

const initialState = {
  transactions: [],
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_TRANSACTION":
      return {
        ...state,
        transactions: [action.payload, ...state.transactions],
      };
    default:
      return state;
  }
};

const AppContextProvider = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

AppContextProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

export { AppContext, AppContextProvider };

My list of transactions:

import React from "react";

import { AppContext } from "../../providers/app";

const Transaction = ({ transaction }) => {
  const { state } = React.useContext(AppContext);

  const amounts = state.transactions.map((transaction) => transaction.amount);
  const balance = amounts.reduce((acc, item) => (acc += item), 0);

  const sign = transaction.amount < 0 ? "-" : "";

  return (
    <div className="transaction">
      <div>
        <span>
          <strong>
            {transaction.amount > 0 ? "Transferred" : "Withdrew"} $
            {Math.abs(transaction.amount)}{" "}
          </strong>{" "}
          {transaction.amount > 0 ? "to " : "from "}
          <strong>{transaction.account}</strong>.
        </span>
      </div>
      <div>
        <span>
          Current <strong>{transaction.account}</strong>'s balance is{" "}
          <strong>
            {sign}${Math.abs(balance)}
          </strong>
          .
        </span>
      </div>
    </div>
  );
};

export default Transaction;

Answer 1

Calculate the balance for one transaction:

const balance = state.transactions.reduce( (accu, ta) => {
    return ta.account !== transaction.account
        ? accu
        : accu + ta.amount;
}, 0);

Alternatively, you can create a balanceByAccount map:

const balanceByAccount = state.transactions.reduce( (acc, item) => {
    const newAmount = ( acc[ item.account ] || 0 ) + item.amount;
    return {
        ...acc,
        [item.account]: newAmount
    };
}, {});

Then you can get the balance for one account with e.g.:

balanceByAccount[ transaction.account ]