import History from "./History";
import { useState } from "react";
const Input = function () {
  const arr = [];
  const [expense, setExpense] = useState("");
  const [amount, setAmount] = useState("");
  const [state, setState] = useState(false);
  const expenseChangeHandler = function (e) {
    setExpense(e.target.value);
  };
  const amountChangeHandler = function (e) {
    setAmount(e.target.value);
  };
  const clickHandler = function () {
    setState(true);
    arr.push({
      expense: expense,
      amount: amount,
    });
  };
  return (
    <div>
      <input
        value={expense}
        onChange={expenseChangeHandler}
      ></input>
      <input
         value={amount}
        onChange={amountChangeHandler}
      ></input>
      <button onClick={clickHandler}>Add</button>
      {state && <History arr={arr}></History>}
    </div>
  );
};
export default Input;

 import "./History.css";
const History = function (props) {
  const arr = props.arr;
  const newArr = arr.map((el) => <p>{el.expense}</p>);
  return (
    <div className="div1">
      <h2>History</h2>
      <div>{newArr}</div>
    </div>
  );
};
export default History;