score:1
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 ]);
score:1
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.
Source: stackoverflow.com
Related Query
- Input element's value in react component is not getting re-rendered when the state changes
- in react when I remove a dynamic input, the input does not show the right value on the browser
- React component not getting rendered each time when state changed
- React component is not getting updated when state changes into the redux
- React map function does not execute when the component is rendered
- React - get request is getting the correct object but when read into react component the value is undefined
- React component do not gets rendered when loading the data from state
- When state changes the right component is not getting displayed in React
- Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- Component not updating when I change the props that I pass to it in React
- Trigger change events when the value of an input changed programmatically React
- Jest enzyme shallow test is not rendering all elements of the React component
- Getting the ref from a dynamic component when using Redux, React and react-router-dom 4.x
- react router changes the URL, but the component is not rendered
- Input type text's value not getting updated while using React JS
- React Router "Link to" does not load new data when called from inside the same component
- React Hooks: how to prevent re-rendering the whole component when only the props.children value changes?
- React component rendering even when there is no change in the state value
- Why the UI component of the react is not getting updated?
- React hook changing the state variable of wrong component when file input
- React Custom component is not getting rendered as expected
- How do I pass a prop to a react component yet not update that prop in the child when parent changes?
- HintText of a TextField component in Material UI does not hide its value when start typing into the field
- Getting the value of a checkbox inside another component when a button is clicked
- The value attribute is not displaying anything in the input type="checkbox" in React Typescript
- In React useEffect does not update after the value has changed from other component
- Modal not showing in when rendered in React component
- React Select does not show the value when selected
- React Recoil selector not triggering its get when the atom state updates to a previous value
More Query from same tag
- Why is my React Component always showing the same state?
- Port 5000 in use constantly
- Changing size of a textbox in html string in React
- Does it matter if the function calls in this loop run concurrently? And if so, how do I make each wait until previous is done?
- why ReactDOM is not defined in my helloworld program?
- Access a variable defined in a CommonJS library from the global browser scope
- Is there any way to remove the "Code Snippet" from a string?
- asyncValidate nested field onBlur
- ReactJS TypeError: Cannot read property of undefined
- ReactJS Passing state from parent to child
- Inner flexbox overrules flex-grow on outer flexbox
- How to map array from localStorage to table in reactJS?
- React - Unexpected Token, expected }
- Getting map is not a function after pressing back button from a redirected page in react.js
- async storage is not working when I reload the react-native app
- Returning Filtered Table
- Best way to manage env variables for multiple environments
- map in reactjs is taking too much time to load
- React array of objects in state not working
- Uncaught ReferenceError: Main is not defined with webpack/react in Rails 4.2.4
- Showing / Hiding links based on criteria: React+Typescript
- Getting active background color using useRef
- Passing a variable to the React useCallback hook
- Input props not working on pure function component?
- Compile .jsx files instead of .js using babel
- Prepend to nameless array in Redux reducer
- State changes in reactjs?
- React: Reload logic on route change
- React component children detect if empty / null before render
- React warning: Functions are not valid as a React child