0

I am working on a React.js app where I have a functional component which contains state array, which I declared like this const [myArray, setMyArray] = useState([]).

I fetch some data from an API and add it to the array with no problem. But I am unable to delete an element of the array. First I delete it through the API and then I try to update the array, but it seems to not work.

Here is the code sample:

const deleteElement = (id) => {
    fetch(URL,{method: "DELETE"}).then((response) => response.json()).then(deleteFromArray(id))};

const deleteFromArray = (id) => {
     const filtered = myArray.filter((item) => item.id !== id);
    
     setMyArray(filtered)
}

The filtered array is ok, it does not contain the deleted element. But I just can't figure out why the myArray does not get updated here. I am new to React so any hints would be appreciated. Thanks

ivana14
  • 107
  • 8
  • In general it should be `.then(() => deleteFromArray(id))`, but your code should delete the element from the state array just fine. Can you elaborate on how you determined that the filtered array is ok? Because if the function is called and `filtered` is fine, I don't see how `myArray` isn't. –  Dec 24 '20 at 22:57
  • @Chris G I have tried console.log(filtered) and saw that the deleted element was not present in the array. However, when I printed the myArray, the element which was supposed to be deleted was still there. It seems to me as though the setMyArray function is not working as it should, but I just cannot figure out why. – ivana14 Dec 24 '20 at 23:27
  • @Nikhil bhatia isn't that direct manipulation of an immutable object? – ivana14 Dec 24 '20 at 23:28
  • @ivana14 check my answer – Nikhil bhatia Dec 24 '20 at 23:55
  • setMyArray runs asynchronously – thelonglqd Dec 25 '20 at 00:01
  • `setMyArray` is asynchronous though, so if you logged `filtered`, then called `setMyArray(filtered)`, then logged `myArray`, that last log will show the previous state of `myArray`. That doesn't mean the state update failed; as the rendered component should demonstrate; see also [this](https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately) –  Dec 25 '20 at 00:27

1 Answers1

0

The setMyArray runs asynchronously so if you wrote like below, the result is always the old value but the array updated successfully.

const deleteFromArray = (id) => {
     const filtered = myArray.filter((item) => item.id !== id);
    
     setMyArray(filtered)
     console.log(myArray); // old value
}

To see the updated array, you should use useEffect like below:

useEffect(() => { console.log(myArray) }, [myArray]);

This hook will runs everytime the myArray changed.

thelonglqd
  • 1,805
  • 16
  • 28
  • now I see that the `myArray` does get updated, but my component still does not rerender as it should. The correct element gets deleted from the array, but the component rerenders to display as if the last element from the array was deleted. – ivana14 Dec 25 '20 at 06:43