score:0
Accepted answer
you are mutating your state. this is a mutation:
data[choice.uuid].checked = false;
you shouldn't mutate your state, you should provide a new state and set it with your state setter function. this is why you have a setdata
there.
function handlecheckbox(choice) {
setdata((prev) => ({
...prev,
[choice.uid]: {
checked: !prev[choice.uid].checked,
},
}));
}
score:0
const handlecheckbox = (choice:ichoice) =>{
setdata((prev) => ({
...prev,
[choice.uuid]: {
checked: !prev[choice.uuid].checked,
}
} as record<string,icheckbox>));
}
is the correct way, thx devserkan
Source: stackoverflow.com
Related Query
- data won't refresh in the dom
- React - What's the best practice to refresh a list of data after adding a new element there?
- How to refresh the React-Admin list data every X seconds?
- React Router Dom Redirect needs to refresh the page to work
- React router dom passing data from parent component to child router component does not pass the props.match
- Why is my data that is coming from apollo server not showing up when I refresh the page?
- Why does data from my api only display once and when I refresh the page it gives an error
- How to refresh a react redux application when data changes on DB outside of the application
- React JS Read props data only when I refresh the page
- How do i make the data in the input feild of my form in next js stay after refresh of the page?
- Im trying to build a menu that has collapsible options, but the dom does not update even when state data updates
- React fetching data re-renders the DOM
- How to refresh the table data when one of the item has its valid till date and time has expired in React Js
- Load async data before rendering the DOM
- Why after refresh the data will into the array in reactjs
- How to load virtual dom once the data from api are loaded React
- My React UI wont update unless i refresh the page
- How to refresh the data component on form submit in React?
- React - can't get DOM to pull in the latest data when posted from a child component
- react-table not rendering data in the initial load and after page refresh
- React.js data won't load at the first time only after refresh it works
- Testing data returned by axios updates the DOM
- React JS - How to page refresh after delete data from the localstorage?
- React router dom NavLink only works when refresh no when click the nav item
- Why should I refresh the page to render the data
- added data don't update automatically in useEffect() Need refresh browser to get the last addition
- In React app , I delete my component data on firebase but it does'n delete from my dom even when I change the state
- How to properly fetch data from several API calls and display it to the DOM in React
- How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
- Can anyone explain the difference between Reacts one-way data binding and Angular's two-way data binding
More Query from same tag
- React. Securing communication between frontend and backend located on the same server
- Using ReactJS to store array items across multiple pages
- Next.js-before-hydration, Next.js-hydration, and FCP
- React - render component when clicking on a component which is not its child
- Set value of Reactstrap's Input to empty string
- How do i display formatted html code stored in javascript object
- Why isn't this react component that searches github's api not rendering?
- props.match.params.id works when I am testing but does not when I deploy in github with gh-pages
- How can I return pass and return variables in a stateless conditional external react component?
- create a link to download the file
- call react function inside anonymous function
- How can I use an import statement in the Jest test file?
- React Toggle open and close using onclick on map function
- Redux Selector for normalized state
- Mapping data in Textarea defualtValue
- React material table losing its sorted state when i click a button in custom column rendering (any state update will cause this issue)
- How to build semantic-ui dropdown which includes header dynamically?
- Redux, Reselect and ImmutableJS causing unnecessary renders on child components
- Isomorphic flux render on server after all requests
- Cannot read property 'map' of undefined useEffect hook
- TypeScript: Property 'name' does not exist on type 'any[]'
- How to remove a object from an array in react hook
- React router dom v6 using useNevigation is not working with redux
- How to Recursion using map in react
- Nested routing in React router 4
- Form-Clearing all the text and other components element when clicked on button
- How to add custom `PNG` image to material ui icon
- Error: Objects are not valid as a React child (found: object with keys {rendered, protected})
- webpack--watch not working
- React.js test fails on finding components