Calculating Quantity and Price Total in React

In this tutorial, you will learn how to calculate quantity and price total in React using a quantity table component. This guide will demonstrate how to leverage JavaScript to calculate the total price and utilize a React table to sum column values. Additionally, you'll discover how to determine the total quantity based on user input and perform price calculations based on the quantity.

written

reviewed

updated

How to Calculate Total Price in React Js?

React Js Calculate Quantity And Total Price In Table: In a Reactjs application, you can create a table to display items in a cart and dynamically calculate the quantity and total price. By using state management, you can track changes in the quantity input fields and update the corresponding total price column instantly.

Each row in the table can have its own quantity input and total price cell, and the values will automatically recalculate when modified. By implementing event handlers and manipulating state variables, you can achieve a dynamic calculation table that reflects real-time changes in the cart,

React Js Calculate Quantity And Total Price In Table Example

    <script type="text/babel">
      const { useState } = React;

      function App() {
        const [items, setItems] = useState([
          { id: 1, fruitName: "Apple", itemPrice: 10, numItems: 2 },
          { id: 2, fruitName: "Banana", itemPrice: 15, numItems: 3 },
          { id: 3, fruitName: "Orange", itemPrice: 5, numItems: 4 },
        ]);

        const handleItemChange = (index, key, value) => {
          setItems((prevItems) => {
            const updatedItems = [...prevItems];
            updatedItems[index] = { ...updatedItems[index], [key]: value };
            return updatedItems;
          });
        };

        const calculateTotal = (item) => {
          return item.itemPrice * item.numItems;
        };

        const grandTotal = items.reduce(
          (total, item) => total + calculateTotal(item),
          0
        );

        return (
          <div className="container">
            <h3>React Js Calculate quantity and Total price in Table</h3>
            <table>
              <thead>
                <tr>
                  <th className="fruit-name">Fruit Name</th>
                  <th className="item-price">Item Price</th>
                  <th className="num-items">Number of Items</th>
                  <th className="total">Total</th>
                </tr>
              </thead>
              <tbody>
                {items.map((item, index) => (
                  <tr key={item.id}>
                    <td>
                      <input
                        type="text"
                        value={item.fruitName}
                        onChange={(e) =>
                          handleItemChange(index, "fruitName", e.target.value)
                        }
                        className="fruit-name-input"
                      />
                    </td>
                    <td>
                      <input
                        type="number"
                        value={item.itemPrice}
                        onChange={(e) =>
                          handleItemChange(
                            index,
                            "itemPrice",
                            parseFloat(e.target.value)
                          )
                        }
                        className="item-price-input"
                      />
                    </td>
                    <td>
                      <input
                        type="number"
                        value={item.numItems}
                        onChange={(e) =>
                          handleItemChange(
                            index,
                            "numItems",
                            parseInt(e.target.value)
                          )
                        }
                        className="num-items-input"
                      />
                    </td>
                    <td className="total-cell">{calculateTotal(item)}</td>
                  </tr>
                ))}
                <tr>
                  <td colSpan="3" className="grand-total-label">
                    Grand Total
                  </td>
                  <td className="grand-total">{grandTotal}</td>
                </tr>
              </tbody>
            </table>
          </div>
        );
      }

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Calculate Quantity And Total Price In Table

How to Calculate Total Price in Html using Javascript?

If you want to create a web or mobile application that can calculate the total price of products or services, you need to use JavaScript. You can use JavaScript to calculate the total price based on the quantity, size, tax, or other factors. In this article, you will learn how to use JavaScript functions and methods to calculate the total price. You will also find some examples of JavaScript code that can calculate the total price of items, such as soap, flights, or books

Price Calculation based on quantity using Javascript

  function calculateTotal() {
            const items = document.querySelectorAll('.item');
            let total = 0;

            items.forEach((item, index) => {
                const quantity = parseFloat(item.querySelector('[name="quantity"]').value) || 0;
                const price = parseFloat(item.querySelector('[name="price"]').value) || 0;

                total += quantity * price;
            });

            document.getElementById("total").value = total.toFixed(2);
    }

Run

Output of Javascript Calculate Total Price

Pasted Image

React JS Tutorial