score:14
two issues there:
you're seeming to try to direct modify
this.state.tasks
. it's important not to do that, never directly modifythis.state
or any object on it. see "do not modify state directly" in the react documentation for state.you're passing an object to
setstate
that is derived from the current state. it's important never to do that, too. :-) instead, passsetstate
a function and use the state object it passes you when calling that function. from "state updates may be asynchronous" in the documentation:because
this.props
andthis.state
may be updated asynchronously, you should not rely on their values for calculating the next state... [instead]...use a second form ofsetstate()
that accepts a function rather than an object.(my emphasis)
i figure your remove
on an array was intended to be hypothetical, but for the avoidance of doubt, arrays don't have a remove
method. in this case, the best thing to do, since we need a new array, is to use filter
to remove all entries that shouldn't still be there.
so:
deletetask(tasktodelete) {
this.setstate(prevstate => {
const tasks = prevstate.tasks.filter(task => task.name !== tasktodelete);
return { tasks };
});
}
score:0
i have followed below steps to delete a particular selected object from the state array:
here i am using a list of checkboxes, when i am selecting a checkbox it will add it in the state array and when it gets de-selected then it will get deleted from the array.
if (checked) {
var tempobject = { checkboxvalue: data, label: title }
this.state.checkboxstate.push(restemp);
} else {
var element = data; //data is coming from different method.
for (let index = 0; index < this.state.checkboxstate.length; index++) {
if (element === this.state.checkboxstate[index].checkboxvalue) {
this.state.checkboxstate.splice(index, 1);
}
}
}
i got stuck for this question and i am sharing my solution. hope it will help you.
score:2
you can use higher order
function array#filter
to delete the task.
let updatedtasks = this.state.tasks.filter(task => task.name !== tasktodelete);
this.setstate({ tasks: updatedtasks });
score:3
you can use filter to remove one object from an array following the immutable pattern (filter will create a new array) :
deletetask(tasktodelete) {
const newtaskarray = this.state.tasks.filter(task => task.name !== tasktodelete);
this.setstate({ tasks: newtaskarray });
}
edit : codepend of the solution : https://codepen.io/dyo/pen/zvpoyp
score:3
you can implement deletetask
method as below:
deletetask(tasktodelete) {
this.setstate((prevstate, props) => {
const tasks = [...prevstate.tasks];
const indexoftasktodelete = tasks.findindex(
task => task.name === tasktodelete
);
tasks.splice(indexoftasktodelete, 1);
return { tasks };
});
}
a. find the index of tasktodelete
.
b. then use splice
method to delete the item from the collection
c. then call setstate
to update the state with tasks
.
score:6
you could simply filter the array :
this.setstate(prevstate => ({
tasks: prevstate.tasks.filter(task => task.name !== 'tasktodelete')
}));
also when updating based on this.state
, its better to use the function form because setstate
is async.
Source: stackoverflow.com
Related Query
- How to delete object from array using object property - React
- How to use spread operator to delete an object from array of objects using spread operator using react?
- How To Send Array of Object using FormData() From React Js To Nodejs, MongoDB?
- How to return an object property from an array of objects in react
- How to find the count of some object property in array of objects using react and javascript?
- How to create Material-UI nested style object from array using map in React
- How to add property to an object from an API using react hooks useState
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- How import object from external JS file in React JS using web pack
- How to sort array of object by properties from left to right having numbers first when property is string?
- How to remove an element from an array that is inside an object in React JS (ES6)
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to reduce and get value from object array using javascript
- How delete an object based on its index from a nested array in React?
- How to use an object to delete it from objects array javascript?
- How to delete objects from react state hook array with a button click
- Update a single property of object from array using useState() hook
- How to remove elements from array using redux, immer, react
- How to select random object from array with React Hooks?
- React how to conditionally edit or add object in array of objects using setState
- How to make a list from json object using React
- How to get value from object property in React or Javascript
- updating a property in an array of object immutably using react hooks
- How to find most recent date from an array of object then add new field and return array in react
- How Can i Add Event Handlers In Reusable React Component Created from Object Array
- How can one property of an object from an array be true if that property of other objects is false?
- How to get nested Object from JSON File using React JS
- how do i update state in react for updating the value of an object inside an array using array.map function
- How to remove a single object from Array Properties in React Js?
- How to push nested object interface array in React Typescript using useState
More Query from same tag
- How to pass interface to the generic?
- 404 error/No Access-Control-Allow-Origin header message in Symfony 4 + React app. How to make the routing work?
- In react, how do I access state inside an action creator?
- Getting Module parse failed: Unexpected token (1:0) error when I try to import css file for a specific component in react
- react-toastify popup showing 2 times
- Why react not render false
- Why do I have to click twice for an event to fire in react?
- How to make a transition when using conditional rendering in React
- How to access the Object property within the method inside the Object in React Hooks
- How does Gatsby application access Azure Key Vault
- Two form's error message handling on same page in react.js
- React : How to Show Message if there is no records
- Why isn't getStaticPaths working with groq and sanity
- How would I add a state constructor to this js file?
- React-Google-Maps API: How to search current location for a search result?
- Component is not getting rendered after history.push()
- Data doesn't reach till reducer
- Line break the string when passing props to React's stateless component
- How can I get the TTS from azure speech sdk and play it in a HTML audio tag
- How to filter and refresh array object
- Redux: Opinions/examples of how to do backend persistence?
- How I can show two nav.link while using a conditional operator?
- React, local json file won't display
- cannot reference React in Fable
- I want to render current timing value to HTML at interval of every seconds in reactjs
- React .map not re-rendering on state change in functional component
- How to get useEffect to only update on changes when the change is from another component
- componentDidMount firing before DOM is mounted when using createPortal in React
- Why Redux doesn't re-render component?
- React, updating state in child component using props after async call in parent component