app.jsx

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [log, setLog] = useState([]);
  const [payments, setPayments] = useState([]); //react elements

  //utility functions
  function pushToLog(amount, diff) {
    log.push({amount: amount, diff: diff });
    setLog([ ...log ]);
  }

  function pushToPayments() {
    setPayments([ ...payments, <Payment /> ])
  }

  //structures
  function Payment() {
    const [amount, setAmount] = useState(0);
 
    function click(diff) {
      setAmount(amount + diff, diff);
      pushToLog(amount + diff, diff);
    }

    return (
      <div>
        <p>Payment Amount: {amount}</p>
        <button onClick={() => click(1)}>Add</button>
        <button onClick={() => click(-1)}>Subtract</button>
      </div>
    );
  }

  let total = 0; //mutable state

  return <div className="App">
    <button onClick={pushToPayments}>New Payment</button>
    <ul>
      {payments.map((entry, index) => <li key={index}>{entry}</li>)}
    </ul>
    <ul>
      {log.map((entry, index) => <li key={index}>{ total += entry.diff } ({entry.amount}, {entry.diff})</li>)}
    </ul>
  </div>;
}