Estoy tratando de representar las entradas de mi formulario varias veces a través de un componente. Hice 3 tutoriales y estoy tratando de aplicar lo que aprendí de eso para hacer esto. Sin embargo, se está volviendo un poco confuso intentar transferir el estado en Enviar. onSubmit Estoy tomando el estado del formulario y usando el operador de propagación para colocarlo en un estado de gastos. Luego, a partir de ahí, estoy tratando de colocar un mapa dentro de mi ExpenseTable.js para representar varios componentes de Expenses.js. Probablemente he pasado demasiado tiempo en una aplicación básica. ¡Por lo que cualquier ayuda se agradece! Aplicación.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>

Funciones Form.js

 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>

Gastos.js

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