Simple Billing System use React.js

 we'll show you how to create a simple billing system using React. The billing system will have input fields for the user to enter the name, price, and quantity of each item, and a table to display a list of all the items with their total cost. You'll learn how to use React's useState hook to manage state in your component, how to handle user events like clicks and input changes, and how to use reduce to calculate the total cost of all items.

source code

React.js file:

import React, { useState } from 'react';

import './BillingSystem.css';

function BillingSystem() {

  const [items, setItems] = useState([]);

  const [itemName, setItemName] = useState('');

  const [itemPrice, setItemPrice] = useState('');

  const [itemQuantity, setItemQuantity] = useState('');

  // add a new item to the billing system

  function handleAddItem() {

    if (itemName && itemPrice && itemQuantity) {

      const newItem = { name: itemName, price: itemPrice, quantity: itemQuantity };

      setItems([...items, newItem]);

      setItemName('');

      setItemPrice('');

      setItemQuantity('');

    }

  }

// calculate the total bill

  const total = items.reduce((acc, item) => {

    return acc + (parseFloat(item.price) * parseInt(item.quantity));

  }, 0).toFixed(2);

  return (

    <div>

      <h1>Billing System</h1>

      <table>

        <thead>

          <tr>

            <th>Name</th>

            <th>Price</th>

            <th>Quantity</th>

          </tr>

        </thead>

        <tbody>

          {items.map((item, index) => (

            <tr key={index}>

              <td>{item.name}</td>

              <td>{item.price}</td>

              <td>{item.quantity}</td>

            </tr>

          ))}

        </tbody>

      </table>

      <p>Total: ${total}</p>

      <div>

        <label>

          Item Name:

          <input type="text" value={itemName} onChange={(e) => setItemName(e.target.value)} />

        </label>

        <label>

          Item Price:

          <input type="number" value={itemPrice} onChange={(e) => setItemPrice(e.target.value)} />

        </label>

        <label>

          Item Quantity:

          <input type="number" value={itemQuantity} onChange={(e) => setItemQuantity(e.target.value)} />

        </label>

        <button onClick={handleAddItem}>Add Item</button>

      </div>

    </div>

  );

}

export default BillingSystem;

BillingSystem.css:

table {

   border-collapse: collapse;

   width: 100%;

 }

 th,

 td {

   padding: 8px;

   text-align: left;

   border-bottom: 1px solid #ddd;

 }

 th {

   background-color: #f2f2f2;

   font-weight: bold;

 }

  input[type='text'],

 input[type='number'] {

   padding: 10px;

   border: none;

   border-bottom: 2px solid #1e72ef;

   border-radius: 4px;

   box-sizing: border-box;

   margin-right: 8px;

   font-size: 16px;

   color: #161617;

 }

 button {

   background-color: #1e72ef;

   border: none;

   color: white;

   padding: 10px 20px;

   text-align: center;

   text-decoration: none;

   display: inline-block;

   font-size: 16px;

   border-radius: 4px;

   cursor: pointer;

 }

 p {

   font-size: 18px;

   font-weight: bold;

   margin-top: 16px;

 }

  .show-box {

   margin-top: 16px;

 }

  .show-box button {

   background-color: #f2f2f2;

   color: #0f100f;

   border: 2px solid #1e72ef;

   border-radius: 4px;

   padding: 8px 16px;

   margin-right: 8px;

   font-size: 16px;

   cursor: pointer;

 }

 h1{

   text-align: center;

 }

 button:hover{

   background-color: #0b1783;

   color: rgb(247, 245, 245);

 }

output: