I am creating an app to keep track of expenses.

Before creating the server side. What I am trying to do is to render all information held in the state in a list format.

As I am not storing this data in a database. I wondered if there would be a way to do it without creating the database. I mean, just do this task dealing just with react.(I have to learn server side yet)

What I've done: I sent the data, data is the state created in , as props to component, and and in there, I created an empty array to push each property of the data object. After created the array, in the return of the List component, I map through that array to print all the information.

But obviously, once I type something, the previous data disappears.

What I am trying to achieve is what I've explained at the beginning.

How to keep track of all inputs and print all of them without losing the previous enter.

I am new to this. So, please, go easy on me :)

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>
  );
}