Calculated total and subtotal using field array on redux-form

Question

With code I gonna provide you how can I calculate total and subtotal on redux form?

    const calculatedSubtotal = (detail,quantity,price) =>{

     detail = [];

     const subtotals = [];

      detail.map((detailItem,index) =>{

               detailItem[index].quantity = quantity;

               detailItem[index].product.price = price;

         subtotals[index] = detailItem[index].quantity * detailItem[index].product.price;

        return subtotals[index];

           })

         } 

  const calculatedTotal = (detail,quantity,price) =>{

     detail = [];

      let total = 0;

       const subtotals = [];


        detail.map((detailItem,index) =>{

                detailItem[index].quantity = quantity;

               detailItem[index].product.price = price;
           subtotals[index] = detailItem[index].quantity * detailItem[index].product.price;

         total += subtotals[index];
         })

      return total;
  }


        componentDidUpdate(prevProps,prevState,snapShot){

          const {change} = prevProps;

          const {detail,quantity,price} = prevProps;

          if(this.props.detail !== prevProps.detail && this.props.quantity !== prevProps.quantity && 
                 this.props.price !== prevProps.price){

            change(`detail[${this.props.index}].subtotal`,calculatedSubtotal(detail,quantity,price));
              change('total',calculatedTotal(detail,quantity,price));
              }
        }


    const valueSelector = formValueSelector('bill');


      const makeStateToProps = () =>{

         const mapStateToProps = (state,props) =>{

                return {

                 detail: valueSelector(state, 
              `detail[${props.index}].quantity`,`detail[${props.index}].product.price`,
               `detail[${props.index}].subtotal`
               ),
                quantity: valueSelector(state,`detail[${props.index}].quantity`),
                price: valueSelector(state, `detail[${props.index}].product.price`)

            }

               }

              return mapStateToProps;
           }

I've been mistaken in previous post because I was missing two arguments: quantity and price.

More information can be found in How to calculate total and subtotal in redux-form using formValueSelector

Maybe I'm logging out the input of my functions calculatedSubtotal and calculatedTotal

Answer 1

Making some assuptions about the shape of your details Array, you could so something like this:

const cart = [
  {quantity: 1, product: {price: 5.00}},
  {quantity: 2, product: {price: 1.99}},
];

const calculatedSubtotal = (detail) => {
  return detail.map(detailItem => {
    return detailItem.quantity * detailItem.product.price;
  });
};

const calculateTotalFromSubtotal = subtotals => {
  return subtotals.reduce((grandTotal, itemSubtotal) => {
    return grandTotal + itemSubtotal;
  }, 0);
}

console.log(calculatedSubtotal(cart));
console.log(calculateTotalFromSubtotal(calculatedSubtotal(cart)));