Removing an object from array with splice() does not work as expected in React

Question

I am creating input fields dynamically based on the number of object in my state array. Beside each field I am adding a button to remove that field. However, when the button is clicked it behaves in an unexpected way.

Below is the visual demonstration:

When I press "Remove Option" button on "Option 0":

here

The output is like :

this

However, when I see from console.log() the correct object is being removed. These are console.log() outputs before:

before

and after the above button click:

after

Here is how I loop from the array in my render():

const questions = this.state.values_array.map((question, index) => {


 return ( 
    <div key = {question.question_id}>   
    {this.state.options_array.map((option, i) => (
        option.questionID === question.question_id ? //to show only this question's options
          <div>
              <span>Option {i}:</span>
              <TextField type="text" defaultValue={option.description} />
              <span>Value:</span>
              <TextField type="number" defaultValue={option.value}/>
              <button onClick={() => this.removeOption(i)}>Remove Option</button>
          </div>
        :
          null
    ))}
    </div>
    )
  }

Here is my removeOption() method I am using to remove the input fields:

removeOption(index){

    let options = [...this.state.options_array];
    options.splice(index, 1);
    this.setState({ options_array: options });
}

And here is how I am calling it in my render's return:

 return (
   <div>{questions}</div>
)

Babak · Accepted Answer · 2020-12-14 00:31:21Z

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

Murat Karagöz · Accepted Answer · 2019-07-19 10:49:40Z

0

You are missing the keys for the div containers. React needs to know which DOM Element has been removed so it re-renders it. Also, do not use the index of map as the key, instead use something like the id e.g. option.questionID.

answered Jul 19, 2019 at 10:49

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Comments

S M Hammad Shakil · Accepted Answer · 2019-07-19 10:57:23Z

0

you need to filter out the individual item from the list

removeOption(index) {
const options = this.state.options_array.filter((items, itemIndex) => itemIndex 
!== index)
this.setState({ options_array: options });}

answered Jul 19, 2019 at 10:57

S M Hammad Shakil

991 silver badge5 bronze badges

Collectives™ on Stack Overflow

Removing an object from array with splice() does not work as expected in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related