score:1
as you are passing the store state to item again after clicking save, you need to listen for props change in item
and set the state again to trigger rerender.
therefore, the 1st step is to find out which value we want to monitor for changes. from the code, it is obvious that status
is the best candidate.
item.js
// not the final solution
// monitor props status change, set the state again and trigger rerender
useeffect(() => {
setstate({ ...state, ...props });
}, [props.status]);
however, there is a problem to tackle if we use props.status
to trigger rerender.
e.g.
when you first click the save on item 2, item status
change from open
-> lock
, the item
rerender. no problem!.
but when you change the dropdown box from lock
to open
of item 2 and click the save
again, item
will not rerender.
as the updated store status of item 2 is still marked as lock, previous status is also lock, there is no changes at all in react point of view.
you can check this codesandbox to simulate the issue.
to address this issue, we need to introduce extra property to monitor its change for rerender. i used updatedat
to generate time on each update to let's react know there is a differences on the value and trigger rerender for us.
modal.js
items: [
{ id: 1212, title: "watch mojos", subtitle: "", status: "open", updatedat: null },
{ id: 1213, title: "drink cheetos", subtitle: "", status: "open", updatedat: null },
{ id: 1214, title: "eat frodos", subtitle: "", status: "lock", updatedat: null }
]
saveitem: action((state, payload) => {
console.log(payload);
state.items = state.items.map((d) => {
if (d.id === payload.id) {
d.status = "lock";
d.updatedat = new date(); // assign new date on each update
}
return d;
});
})
item.js
useeffect(() => {
setstate({ ...state, ...props });
}, [props.updatedat]); // monitor update date change instead of status change
here is the workable codesandbox
Source: stackoverflow.com
Related Query
- react easy-peasy component is not rerendered when the global state is modified
- Updating the react component state when a global variable changes
- Input element's value in react component is not getting re-rendered when the state changes
- React component create a new instance of the state when re-rendering even the state is not changed
- React component is not getting updated when state changes into the redux
- React - Redux component not displaying array.length correctly despite component being rerendered on state change without mutating the state
- React does not re-render component when the state changes
- State in React component not setting data when the browser (tab) is refreshed
- React Component not re rendering when the state got updated
- React component do not gets rendered when loading the data from state
- When state changes the right component is not getting displayed in React
- React component not updating when store state has changed
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- React shouldComponentUpdate() is called even when props or state for that component did not change
- React leaflet center attribute does not change when the center state changes
- Component not updating when I change the props that I pass to it in React
- Change the state when clicking outside a component in React
- Component rerenders when state has not changed on the second click
- React is not updating when Redux state is changed below the first level
- Is it a bad practice to use state in a React component if the data will not change? Should I use a property on the class instead?
- component not re-rendering when updating the state in mobx
- ReactJS component state is not updating when any value in state array is modified
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- Formik testing error: The `document` global was defined when React was initialized, but is not defined anymore
- React Router "Link to" does not load new data when called from inside the same component
- React Hooks state not working properly when the function calling it is called in another function
- React component rendering even when there is no change in the state value
- Why React component get re-rendered only once when state does not change?
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- React Component not updated when state changes
More Query from same tag
- Use Microsoft Graph Toolkit with msal-browser
- override useState variable when it is used in useEffect
- Require returning object and not string
- What is causing my react page to be blank?
- Why Route in an array to open two components at the same time
- How can animation be added to markers in "react-google-maps"?
- Dispatching in Redux based on state
- React useLayoutEffect in a child of a portal runs before the component renders
- Accessing React childs state
- onCompleted callback in useMutation doesn't have return values
- Chartist graphs get re-drawn everytime I click on any button or resize window
- In my React app hosted by heroku, react browser router can direct exact routes successfully but dynamic routes cannot be found
- Problem when passing props using history.push() in react-router
- Displaying state content passed to a child component in React
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop and it disappear when i clear the stored session data
- Redux Thunk + ReactJS: Action creator being called but dispatch function not being called
- Can't call setState (or forceUpdate) on an unmounted component
- How to Jest test use of lodash.get in React component?
- CSS text hiding behind image when trying to overlay on image
- How to pass material-ui's theme object to defaultProps?
- Array of components gets reinitialized on every state change
- State is undefined when using console.log
- how to display data with REST?
- How could I use a module to pass in a react component?
- Not able to update state value with use reducer
- TypeError: readonly assignment error with React application in Safari
- Fetch API response with react and Express.js won't show any result with console.log
- Link cannot appear as a descendant of a link
- ReactJs, the SyntaxError with `static defaultProps`
- How to redirect to home screen in react?