List items with inputs - how to add list object to an array when input has value?

I have created a list of objects and each list item has input within:

{flowers_data?.map((flower) => {
   return (
      <>
         <div className={classes.Nested_Flower_Container} key={flower.id}>
            <div className={classes.Nested_Flower_Name}>
               {flower.name}
            </div>
         <div className={classes.Nested_Flower_Input} style=>
            <TextField
              id="Amount"
              label="Amount"
              variant="outlined"
              size="small"
              type="number"
              onChange={(e) => {
                 setAmount(e.target.value);
                 handleAddList(e.target.value, flower);
              }}
              className={classes_2.root}
            />
         </div>
      </div>
  </>)
})}

How can I add an object that has a value in input to an array? I tried to do this using a function that I created, but each time I change one element's target.value and move on to the next item to change its input value, there is only one element in the array with the latest target.value. And after modifying the inputs, when I try to output the values outside that function with e.g. a button, the add_flowers_tab array is empty.

handleAddList function:

let temp_flower: Flower;
let add_flowers_tab: Flower[] = [];

    const handleAddList = (targetValue: string, flower: Flower) => {

        temp_flower = {
            "id": flower.id,
            "name": flower.name,
            "price": flower.price,
            "amount": Number(targetValue),
            "creation_date": flower.creation_date
        }

        if (targetValue === '') {
            /* Delete flower when input is empty */
            add_flowers_tab.forEach(tabFlower => {
                if (tabFlower.id === temp_flower.id) {
                    const indexOfDelete = add_flowers_tab.indexOf(tabFlower);
                    add_flowers_tab.splice(indexOfDelete, 1);
                }
            })
        }
        if (targetValue !== '') {
            /* Add flower to tab when input has value */
            if (add_flowers_tab.length > 0) {
                /* When input changes, delete flower with old input value and add the new one */
                add_flowers_tab.forEach(tabFlower => {
                    if (tabFlower.id === temp_flower.id) {
                        const indexOfDelete = add_flowers_tab.indexOf(tabFlower);
                        add_flowers_tab.splice(indexOfDelete, 1);
                        add_flowers_tab.push(temp_flower);
                    }
                })
            }
            else {
                /* Add new flower as a first element in the array */
                add_flowers_tab.push(temp_flower);
            }

            /* 
               Displays an array with only the most recently added temp_flower, even though 
               several inputs in list have values
            */

            console.log(add_flowers_tab);
        }
    }

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW