Estoy creando una aplicación para realizar un seguimiento de los gastos.

Antes de crear el lado del servidor. Lo que intento hacer es presentar toda la información contenida en el estado en un formato de lista.

Como no estoy almacenando estos datos en una base de datos. Me preguntaba si habría una manera de hacerlo sin crear la base de datos. Quiero decir, solo haz esta tarea tratando solo con reaccionar (todavía tengo que aprender del lado del servidor)

Lo que hice: envié los datos, los datos son el estado creado en , como accesorios para el componente, y allí, creé una matriz vacía para insertar cada propiedad del objeto de datos. Después de crear la matriz, en el retorno del componente Lista, mapeo a través de esa matriz para imprimir toda la información.

Pero obviamente, una vez que escribo algo, los datos anteriores desaparecen.

Lo que estoy tratando de lograr es lo que he explicado al principio.

Cómo realizar un seguimiento de todas las entradas e imprimirlas todas sin perder la entrada anterior.

Soy nuevo en esto. Así que, por favor, tómatelo con calma :)

 export default function Forms() { const [data, setData] = useState({ concept:"", amount:"$", date:getCurrentDate(), select: "Income" }) function handleChange(event){ let name = event.target.name; let value = event.target.value; setData({...data,[name]:value}) } return ( <> <h2>Incomes - Outcomes</h2> <form className="form"> <label>Concept:</label> <input type="text" name="concept" value={data.concept} onChange={handleChange} /> <label>Amount:</label> <input type="text" name="amount" value={data.amount} onChange={handleChange}/> <label>Date:</label> <input name="date" value={data.date} onChange={handleChange}/> <label>Select type of expense:</label> <select name="select" value={data.type} onChange={handleChange}> <option value="Income">Income</option> <option value="Outcome">Outcome</option> </select> </form> <List data={data}/> </> ); } export default function List({ data }) { const arrayOfExpenses = []; Object.keys(data).forEach((key) => { arrayOfExpenses.push(key + ": " + data[key]); }) function handleSubmit(event) { event.preventDefault(); } return ( <div> <button onClick={handleSubmit}>Submit</button> {arrayOfExpenses.map((element, index) =>( <ul key={index}> <li>{element}</li> </ul> ) )} </div> ); }