Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

314
Views
why splice not working correctly in react?

I am trying to delete row from my list using delete button .I do like this

if (state.indexOf(action.payload) > -1) {
      console.log('iff----')
        state.splice(state.indexOf(action.payload), 1);
    }
          console.log(state)

     return state

but it is not deleting the row .here is my code https://plnkr.co/edit/bpSGPLLoDZcofV4DYxPe?p=preview Actually using add button I am generating the list of item and there is delete button I am trying to delete item from list using delete button could you please tell me why it is not working ?

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

Avoid using Array#splice when working with state in React or Redux. This mutates your state, which you never want to do. Instead, favour immutable methods like Array#slice. e.g.

const index = state.indexOf(action.payload);
if (index === -1) {
  return state;
}
return state.slice(0, index).concat(state.slice(index + 1));

In ES6 that last line could also be written as:

return [...state.slice(0, index), ...state.slice(index + 1)];
over 4 years ago · Santiago Trujillo Report

0

The flaw of this approach is that in JavaScript, objects and arrays are reference types, so when we get an array, we actually get a pointer to the original array's object managed by react. If we then splice it, we already mutate the original data and whilst it does work without throwing an error, this is not really how we should do it, this can lead to unpredictable apps and is definitely a bad practice. A good practice is to create a copy of the array before manipulating it and a simple way of doing this is by calling the slice method. Slice without arguments simply copies the full array and returns a new one which is then stored. And we can now safely edit this new one and then update to react state with our new array. let me give you and example:

We have an array like this const arr=[1,2,3,4,5]. This is original array.

As I told you before, we can do that like this:

const newVar=arr.slice();
newVar.splice(Index,1);
console.log(newVar);

Or

An alternative to this approach would be to use it a ES6 feature, it is the Spread Operator

Our prior code can be something like this:

const newVar=[...arr]
newVar.splice(Index,1);
console.log(newVar);

That's it. Good luck

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!