React Does Not Re-render Updated Array State

I have a simple array in below and I just change index of elements in array by a handler: const [items, setItems] = useState([ { id: 5, val: 'Iran' }, { id: 2, val: 'German

Solution 1:

It's because the instance of the items array is not changing.

Try this:

setItems([...items]);

That copies the array to a new identical array. React will see that it's different and will re-render.