Accepted answer

So what is happening is that the Map itself is not changing (eg. every time you update the Map, you still have a reference to the same exact Map in memory), so react is not rerendering.

This falls under the whole "immutable" thing with react. Any time a state change happens, a new object or array ow whatever should be created so that react and easily detect that something changed and thus rerender. This makes it so react doesn't have to iterate over every key in your object/array to see if anything changed (which would kill your performance).

Try this in the code which updates your map:

tempVoucherSet.set(voucherDemonination, voucherQuantity);
setVoucherSet(new Map(tempVoucherSet)); // -> notice the new Map() 

This is analogous to other code you may have seen with react and state changes where new objects/arrays are created any time a new property/item is added:

setState({ ...oldState, newProperty: 'newValue' })
setState([ ...oldArray, newItem ]);


I had the same issue in the past. Set your state this way:

setVoucherSet(new Map(voucherSet.set(voucherDemonination, voucherQuantity)));

That will cause a re-render.

Related Query

More Query from same tag