I am using following function to add index to each array object but all id get same value when I check console.log
var foo = [...this.props.articleList];
foo.forEach(function(row, index) {
row.id = index+1;
});
console.log(foo);
I want something like this =>
[{…}, {…}, {…}, {…}, id: 1], [{…}, {…}, {…}, {…}, id: 2], [{…}, {…}, {…}, {…}, id: 3]
but it is returning
[{…}, {…}, {…}, {…}, id: 3], [{…}, {…}, {…}, {…}, id: 3], [{…}, {…}, {…}, {…}, id: 3]
The problem appears to stem from handling foo and subsequently manipulating row.id in a mutative manner.
The solution is to leverage a strategy commonly referred to as cloning.
Tools such as spread syntax and Array.prototype.map() tend to be useful for this.
See below for a practical example.
case types.SOMETHING:
return {...state, List: [...state.List, action.payload].map((row, index) => ({...row, index}))}
You could user array.map as follows
var foo = [...this.props.articleList];
foo = foo.map(function(row, index) {
row.id = index+1
return row;
});
console.log(foo);
Try this. The below two solutions would work
const foo = [...this.props.articleList];
const articles = foo.map((row, index) => (
row.id = index+1;
));
console.log(articles);
Or
const foo = [...this.props.articleList];
const articles = foo.map((row, index) => {
return row.id = index+1;
});
console.log(articles);
