Ionic React TS - List not visually updating after deleting an element in the list

Issue

I want to be able to see the changes on the list ui when I delete the list element. How do I do this?

const removeElement = (index: number) => {
    console.log("Index " + index);
    let array = list;
    delete array[index];
}

..

        <IonList>
            {list.map((item, index) => (
                <IonItem className="list-item">
                    <IonLabel slot="start">{item}</IonLabel>
                    <IonIcon slot="end" icon={trashOutline} onClick={() => removeElement(index)} />
                </IonItem>
            ))}
        </IonList>

Solution

You need to keep that array on the state so when you modify it a re-render is triggered.

const [array, setArray] = useState([1,2,3,4,5]);

const removeElement = (index : number) => {
     // first we make a copy of the array
    const arrayCopy = [...array];

    //we remove the element from the copy
    arrayCopy.splice(index,1);

    //set the new state
    setArray(arrayCopy);
}

This should be fine. 

Answered By - Cristian Riță