Insert object into array at specific index in React

Question

I'm attempting to add an object at a specific point in my 'data' array which is this components state. The following isn't working, the array simply gets emptied.

addNewBulletAfterActive = () => {
    const array = this.state.data;
    const newBulletPoint = {
        id: this.state.data.length += 1,
        title: 'Click to add'
    };
    const newData = array.splice(this.state.activeBulletPointId, 0, newBulletPoint);
    this.setState({
        data: newData
    });
}

The idea is that if I have a list of 10 bullet points, the user can click on the 4th bullet point and press enter to add a new bullet point directly after. I've not had any issues adding items to the end of the array but it looks like .splice is causing issues.

Aron · Accepted Answer · 2017-07-17 15:01:05Z

29

I believe this should do what you're after.

function addAfter(array, index, newItem) {
    return [
        ...array.slice(0, index),
        newItem,
        ...array.slice(index)
    ];
}

This function returns a new array with a new item inserted in the middle. It doesn't mutate your original array and so will play nicely with component's state and Redux.

You can then assign the output from this function to your state.

answered Jul 17, 2017 at 15:01

Aron

9,3187 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sinan Yaman Over a year ago

I think this answer should be the one accepted

Yury Tarabanko · Accepted Answer · 2017-07-17 15:02:45Z

12

splice returns spliced items (which is empty since you splice 0 items) and mutates original array.

const newData = array.slice(0); // copy

newData.splice(this.state.activeBulletPointId, 0, newBulletPoint);

this.setState({
    data: newData
});

edited Jul 17, 2017 at 15:02

answered Jul 17, 2017 at 14:59

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

4 Comments

Valentin Over a year ago

splice will mutate state which is generally a bad practice

Yury Tarabanko Over a year ago

@Valentin I've added slice before splice :)

user27414 Over a year ago

So far this is the only answer that actually explains why the OP's code didn't work.

GuerillaRadio Over a year ago

This is exactly what I was after. Thanks @YuryTarabanko

Edmond Sylar · Accepted Answer · 2020-07-17 08:48:59Z

-1

I think this could be an easier and faster method to do this

/*Just plain JS*/
function AddAfter(array, newObject){
    array.unshift(newObject);
  }
  
/*In react If updating state*/
var _prev = this.state.your_array; //getting the current value for the state object
var newInfo = {id: 1, more: 'This is a new object'};
_prev.unshift(newInfo);

answered Jul 17, 2020 at 8:48

Edmond Sylar

12 bronze badges

Collectives™ on Stack Overflow

Insert object into array at specific index in React

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related