App Expense Manager Part 1

 import React,{useState,useEffect} from "react";

import "bootstrap/dist/css/bootstrap.min.css";

export default function () {
    const [expense,setExpense]=useState([]);
    const [total,setTotal]=useState(0);

    return <>
        <ExpenseForm setExpense={setExpense} setTotal={setTotal}/>
    {/*=================*/}
    <ExpenseList expense={expense} setExpense={setExpense} total={total}/>

    </>
}

//======Form

function ExpenseForm({setExpense,setTotal}) {

    const [name,setName]=useState("");
    const [amount,setAmount]=useState("");
    const [date,setDate]=useState(null);

    function Add() {
        setExpense(prevExpense => [...prevExpense, {
            "Name":name,
            "Amount":amount,
            "Date":date
        }]);
        setTotal((p)=>p+parseInt(amount));
        setName("");
        setAmount("");
        setDate("");
    }

    return <>
        <div className={"m-2 p-2"}>
            <div>
                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Expense Name</label>
                    <input value={name} onChange={(e)=>{setName(e.target.value)}} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter Expense Name"/>
                </div>

                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Expense Amount</label>
                    <input value={amount} onChange={(e)=>{setAmount(e.target.value)}} type="number" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter Expense Amount"/>
                </div>
                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Expense Date</label>
                    <input value={date} onChange={(e)=>{setDate(e.target.value)}} type="date" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter Expense Date"/>
                </div>

                <div className={"mt-2"}>
                    <button onClick={Add} className="btn btn-primary">Add</button>
                </div>

            </div>
        </div>
    </>
}

function ExpenseList({expense,setExpense,total}) {

    useEffect(()=>{
        console.log(expense);


    },[expense]);

    return <>
        <table className="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Amount</th>
                <th scope="col">Date</th>
                <th scope="col">Delete</th>
            </tr>
            </thead>
            <tbody>


            {
                expense.map((item,index)=>{
                    return <tr>
                        <th scope="row">{index+1}</th>
                        <td>{item.Name}</td>
                        <td>{item.Amount}</td>
                        <td>{item.Date}</td>
                        <td><button className={"btn btn-danger"}>Delete</button></td>
                    </tr>
                })
            }

            </tbody>
        </table>

        <div className="d-flex justify-content-end">
            <span>
                Total: {total}
            </span>
        </div>
    </>
}