Почему сумма и заряд в моем коде реакции не отображаются на экране

Question

У меня есть сумма и плата, которая отображается каждый раз, когда информация помещается в форму ввода. Мне удалось уточнить сумму начисления и сумму, и она выводит на консоль правильные данные, но каждый раз, когда я нажимаю кнопку отправки, она не отображается на странице. У меня нет проблем, напечатанных на консоли. Может кто-нибудь, пожалуйста, помогите мне проверить код.

Вот структура кода для app.js:

const initialExpenses = [
    { id: uuid(), charge: "rent", amount: 1600 },
    { id: uuid(), charge: "car payment", amount: 5000 },
    { id: uuid(), charge: "utility bills", amount: 800 }
];

function App() {
    // all expenses and add expenses
    const [expenses, setExpenses] = useState(initialExpenses);
    // Single charges
    const [charge, setCharge] = useState("");

    // Single amount
    const [amount, setAmount] = useState("");

    // Functionalities
    const handleCharge = (e) => {
        setCharge(e.target.value);
    };
    const handleAmount = (e) => {
        setAmount(e.target.value);

    }

    const handleSubmit = e => {
        console.log(amount, charge)
        e.preventDefault();
        if (charge !== '' && amount > 0) {
            // The above code using the short notation syntax in ES6 which means 
            charges: charges === charges, same for amount
                   const singleExpense = { id: uuid(), charge, amount }
            setExpenses([...expenses, singleExpense])
            setCharge("");
            // setAmount("")
        } else {
            // handleAlert
        }
    };

    return (
        <>
            <Alert />
            <h1>Budget Calculator</h1>
            <main className="App">
                <ExpenseForm
                    charge={charge}
                    amount={amount}
                    handleCharge={handleCharge}
                    handleAmount={handleAmount}
                    handleSubmit={handleSubmit}
                />
                <ExpenseList expenses={expenses} />
            </main>
            <h1>
                total spending: {" "}
                <span className="total">
                    #{expenses.reduce((acc, curr) => {
                    return (acc += parseInt(curr.amount))
                }, 0)}
                </span>
            </h1>
        </>
    );
}

export default App;


Here is the ExpenseForm code
const ExpenseForm = ({ amount, charge, expenses, handleCharge, handleAmount,
    handleSubmit }) => {
    return (
        <form onSubmit={handleSubmit}>
            <div className="form-center">
                <div className="form-group">
                    <label htmlFor="charge">Charge</label>
                    <input
                        type="text"
                        className="form-control"
                        id="charge"
                        name="charge"
                        placeholder="Enter value here"
                        value={charge}
                        onChange={handleCharge}
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="amount">Amount</label>
                    <input
                        type="value"
                        className="form-control"
                        id="amount"
                        name="amount"
                        placeholder="Enter value here"
                        value={amount}
                        onChange={handleAmount}
                    />
                </div>
            </div>
            <button type="submit" className="btn">
                Submit
                <MdSend className="btn-icon" />
            </button>
        </form>
    )
}

export default ExpenseForm;

Answer 1

Несколько мелких ошибок, все работает здесь: https://codesandbox.io/s/inspiring-lewin-uoz4g

1. Я не знаю, каково ваше начальное состояние расходов, должно быть []
2. Если вы хотите установить новое состояние на основе предыдущего состояния, вы должны сделать обратный вызов:

setExpenses(previousStateExpenses => [
        ...previousStateExpenses,
        singleExpense
      ]);

Я сделал несколько импортов и удалил <Alert/>, который, как мне казалось, не нужен для этого на работу.