score:3
Accepted answer
indexof
will just look for the object with the exact same object reference, so even if you create a new object with the exact same data as the todo you want to remove it will not work, sadly.
you could instead filter
out the item with the same key
as snapshot.key
.
this.todosref.on('child_removed', snapshot => {
this.setstate(previousstate => {
const todos = previousstate.todos.filter(todo => todo.key !== snapshot.key);
return { todos };
});
});
score:2
splice returns the deleted elements if any. since in your example you are mutating the array, the new state will be set to the array containing the deleted element.
this.state.todos.splice(index, removedtodo);
is supposed to be
this.state.todos.splice(index, 1);
and this should be performed before setting the state.
this.todosref.on('child_removed', snapshot => {
const removedtodo = {
key: snapshot.key,
value: snapshot.val()
}
const index = this.state.todos.indexof(removedtodo);
let todos = this.state.todos.splice(index, removedtodo);
todos.splice(index, 1);
this.setstate({
todos: todos
});
});
Source: stackoverflow.com
Related Query
- Setting state without a removed item
- Replace array item with another one without mutating state
- Removing item in nested state results in incorrect item being removed in DOM
- Set State Item Back to Initial State without mutation
- Setting active state on a Nav item depending on the Route using ReactBootstrap
- Setting context state with vs without constructor
- Is it possible to add item to a react array state without re-rendering all items?
- Setting state without re-rendering with useEffect not working
- How to update an item in array while setting state in react
- How to execute change in a component without setting state in a react app?
- Setting the state on one item only
- setState removes an items from an array using filter but removed item stays in state as an empty string
- Setting React state in .map function without overwriting state
- React Setting State to Scope of Item
- React State changing to false automatically without setting it
- How to manage state of many dynamic variables without manually setting each and every variable on my own
- React.js - Setting a state item as an Array item, referencing in other state items then updating state when Array Item changes
- How to delete an item from state array?
- Setting state on componentDidMount()
- React: update one item in a list without recreating all items
- How to edit an item in a state array?
- React: setting the disabled attribute based on a state
- Delete an item from Redux state
- Typescript and React setting initial state with empty typed array
- React hook equivalent to callback function after setting state
- How to update react state without re-rendering component?
- Setting state in the Query component of react-apollo
- init state without constructor in react
- React: Setting state to an es6 Map
- semantic ui react Setting dropdown value to state
More Query from same tag
- React + Webpack: React.createElement: type should not be null, undefined, boolean, or number
- How to get the latest state value? reactjs
- Webpack css setup and best practise
- Javascript spread syntax merges in object but appends in array
- What do these different usages of ‘import’ represent?
- React useState hook - when to use previous state when updating state?
- Server Error ReferenceError: window is not defined This error happened while generating the page
- Is there a way to turn off number of nested rows when row grouping?
- bar chart not showing geting Error: "category" is not a registered scale
- Generic function in react with multiple state variables
- React router 1.0 pass multiple props to children routes
- Cannot GET /test - expressjs
- Unexpected node type error SequenceExpression with jest
- onFocus bubble in React
- getCurrentPosition is not getting called ReactJS
- How to use Django User Groups and Permissions on a React Frontend with Django Rest Framework
- Wait for Completion in reactjs
- React Router V6 - useNavigate() may be used only in the context of a <Router> component
- ReactJS: How to get response array inside State(useState) and check the length of the array when rendering/binding
- React, data display with GitHub api
- Listen to chrome extension installation in app
- props is not initialized in react component
- React: how to mix server-side HTML with react components and functions
- How can I fix "Change tab after reloading page ."
- React panel is squashed in tab that is not directly loaded - React Equalizer
- Can you call a saga and continue execution only when a different saga is finished?
- button onClick methods not working in react app
- class components function not found
- When submit button is clicked, how to do something else before submit in ReactJS?
- Why does component rerender forces webpage to reset scroll position?