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

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“:

The output is like :

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

and after the above button click:

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>
)

Answer

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.