I am trying to render my form inputs multiple times through a component. I did 3 tutorials and am trying to apply what I learned from that to make this. However, it's getting a bit confusing trying to transfer state onSubmit. onSubmit I'm taking state from the form and using the spread operator to place it into a expenses state. Then from there, I am trying to put a map inside of my ExpenseTable.js to render multiple Expenses.js components. I've probably spent way too much time on a basic app. So any help would be appreciated! App.js

const [formValues, setFormValues] = useState(initialValues);
const [expenses, setExpenses] = useState([]);

  return (
    <div className="App">
      <header>
        <h1>Bloop</h1>
      </header>
      <Form formValues={formValues} setFormValues={setFormValues} expenses={expenses} setExpenses={setExpenses} />
      <ExpenseTable setExpenses={setExpenses} expenses={expenses}/> </div> 

Form.js Functions

 
const onHandleChange = (e) => {
  const value = e.target.value;
  setFormValues({...formValues,
  [e.target.name]: value
  });
}

const onSubmit = (e) => {
  e.preventDefault();

setExpenses([
  ...expenses, { id: Math.random() * 1000},
])
 setFormValues('');
};

ExpenseTable.js

  const userRows = expenses.map(expense => (
    <Expense key={expense.id} expense={expense} />
  ));

  return(
<div className="expense-container">
      <ul className="expense-list">
       {userRows}
      </ul> </div> 

Expense.js

  return(
    <div style={{ display: 'flex', justifyContent: 'spaceBetween'}}>
    <p>{payment}</p>
    <p>{purchase}</p>
    <p>{date}</p>
    <p>{location}</p>
    <p>{price}</p>
  </div>