score:1
Accepted answer
yes, splice
affects the array it acts on so don't use in this way. instead you need to create a new array of the correct elements:
this.setstate({
listarray: this.state.listarray.filter((el, idx) => idx !== i);
});
if you want to remove only the first instance, maybe couple with a findindex
(although indexof
would work in your example as well) first:
delete(elem) {
const idxtofilter = this.state.listarray.findindex(el => el === elem);
if (idxtofilter < 0) {
return;
}
this.setstate({
listarray: this.state.listarray.filter((el, idx) => idx !== idxtofilter);
});
}
this creates a new array without modifying the old which will cause anything that reacts to listarray
changing to be notified since the reference has changed.
Source: stackoverflow.com
Related Query
- Is My Approach to the Todo App Delete Function Wrong?
- In react js i create a todo app but when i am doing todo-delete it by default delete the first item why?
- Error creating an delete function in a Todo app Redux : TypeError: state.byIds.filter is not a function
- function App() vs class App extends Component in the App.js file
- Create-React-App creates this <iframe> that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor
- cannot delete array item, the wrong item always gets deleted
- React - Error: Invalid hook call. Hooks can only be called inside of the body of a function component. What is wrong my syntax?
- How can I get the correct ID assigned to the delete function
- React - mapStateToProps function isn't getting called in my todo app
- What is passed to the success function in an Ajax delete request?
- handleRemove function for Todo List app with an array of objects
- React App Using the same function in two places but the API call is different. How do I force it to use the root everytime?
- "IndexOf" function in ReactJS doesn't work like the vanilla JS approach
- What is the recommended approach for large react app with react-query?
- Delete Function in To Do App Returning as an Undefined error in React
- How to concat or delete letters of the current value in input field (redux edit todo item)
- can anyone tell me why i am unable to delete an item from the todo list?
- What is the correct approach in React to loop through an array to build html-select list of items in a function and call it in render()?
- Async function returning empty array, and then the desired data - causing app to crash
- How to make the filters work in this todo app created using react and redux?
- the function doSomethingWithData(v) is being called with the wrong value of the variable V. T
- Remove a todo from the list by index using filter function (Redux+ react)
- How can I Delete a Todo Task while Making a Todo app using filter method in React?
- How to create a play against the computer function to my react app
- Rails DELETE route not working properly / not calling the controller function
- Is this a correct approach to populate the properties of an App Context in React?
- I am trying to delete items from TODO app using axios and django
- Use the call function of d3js on a react app
- What is wrong with the structure of my 'BrowserRouter', 'Routes' and 'Route' in my function App()?
- Counter in the app doesn't function as intended
More Query from same tag
- Next js custom server using express to route
- Where to store parameters for ajax request
- react-i18next fallback backend combination issue
- Understanding the syntax of connect() function in react-redux
- Disable date and time for antd DatePicker
- How to test a function in var in javascript
- net::ERR_CONNECTION_TIMED_OUT for a POST request from REACT.js front-end to node.js back-end after deployment
- reactjs: Es6 unable to understand the syntax
- Splitting out react components as widgets
- Function undefined when assigned to variable
- Looping through simple object properties in react JSX
- I'm creating a function where non Login user cant add to cart
- Saving JS State to an unordered list
- Make Tailwind Classes non-Global (automatically!)
- inputType={"number"}, Number dial pad not showing in ios but visible in android - React js
- React & SASS - checkbox component not aligning with label
- What's the best practice to update Redux state in components that needs the same values?
- findDOMNode() and getDOMNode() are not a functions
- Store and edit data using ReactJS
- How to select multiple checkbox in Accordion using react?
- Error when getting values from json to data table
- How to avoid DRY code with React Components
- How to force Apollo Query component to re-run query when parent component re-renders
- How to conditionally $merge or $set nested data in a redux reducer?
- Mui5 Autocomplete warning
- How can I change the label elevation of a material ui TextField?
- Includes() function alternative React
- React: why do you have to bind this method?
- React Redux Data not being passed to props
- Set a global service for import in Create React App