I'm trying to use splice to add new ponents into an array. If I use concat all the elements are added properly at the end, but what I also need is add at the beginning or in the middle of the array using splice. Any suggest ?

class App extends React.Component {
  state = {
    ponents: []
  };

  addNewElement = (element) => {      
    this.setState(prevState => ({   
      //Works fine
      //ponents: prevStateponents.concat(element)

      ponents: prevStateponents.splice(0, 0, element)
    }));
  };

}

I'm trying to use splice to add new ponents into an array. If I use concat all the elements are added properly at the end, but what I also need is add at the beginning or in the middle of the array using splice. Any suggest ?

class App extends React.Component {
  state = {
    ponents: []
  };

  addNewElement = (element) => {      
    this.setState(prevState => ({   
      //Works fine
      //ponents: prevState.ponents.concat(element)

      ponents: prevState.ponents.splice(0, 0, element)
    }));
  };

}

• javascript
• reactjs

• splice modifies the array inline; what you want is something that'll return a modified version of the array like slice developer.mozilla/en/docs/Web/JavaScript/Reference/… – Hamms Commented Jul 25, 2017 at 21:17
• 1 splice will work, it just returns funky: an array of deleted items, not the array itself. do the splice() off to the side instead of capturing it's return and you'll be fine, or something like prevState.ponents.splice(0, 0, element) && prevState.ponents if you want it all inline. tack on .slice() if you want a fresh new array. – dandavis Commented Jul 25, 2017 at 21:19

3 Answers 3

splice() returns an array of elements that have been removed from the array. If no elements were removed, splice will return an empty array.

However, splice will change the contents of the array it's called on. You need to set the state on the updated array, not on what splice returns.

Try this method:

addNewElement(element) {
  this.state.ponents.splice(0, 0, element);
  this.setState({ ponents: this.state.ponents });
}

Below is a working snippet to demonstrate how you can insert a new element at a selected index using splice within a React ponent.

CodePen Demo

Be careful to note the difference between methods that mutate the array on which they are called and methods which returns mutated versions of the array on which they are called.

prevState.ponents.splice(0, 0, element) returns a new array containing the elements which have been removed, which for your purposes is going to be nothing.

Notably, splice also mutates the ponents array; mutating your State elements is A Bad Thing To Do; one simple way to avoid that is to create a clone of your array and splice that.

this.setState(prevState => {
  const ponents = prevState.ponents.slice(0);
  ponents.splice(0, 0, element);
  return { ponents };
});

This is functional, but relatively inelegant.

Other options you could consider would be to use React's immutability helper or use slice to divide your original array in two then concat all the bits together:

const i = // index at which to insert the new elements
const left = prevState.ponents.slice(0, i)
const right = prevState.ponents.slice(i)
return {
  ponents: left.concat(elements, right)
}

Array#splice works in situ and mutates the original array. You have to make a new instance (copy it) with Array#slice and then modify it.

addNewElement = (element) => {
   const newArr = prevState.ponents.slice();   
   newArr.splice(2, 0, 'foo');         // add 'foo` string at `2nd` index
   this.setState(prevState => ({   
      ponents: newArr;
   }));
};