CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-state
MUHAMMAD FAIZ
MUHAMMAD FAIZ

Reputation: 23

Array.push is pushing only last object in the array

First i set ids as an object

attribute.map((item, index) => {
                    setIds({ ...ids, [index]: item.id })
                })

then i try to push it in an array, but it is only pushing last object

let idsArr = []
Object.keys(ids).map(key => {
            idsArr.push(ids[key])
        })

Upvotes: 1

Views: 3565

Answers (2)

Drew Reese
Drew Reese

Reputation: 203427

Issue

You are enqueueing a bunch of React state updates inside a loop, using a normal update, and as each update is processed by React it uses the same value of ids from the render cycle they were all enqueued in. In other words, each update stomps the previous one and the last state update wins. This is the state value you see on the subsequent render cycle.

Solutions

Use functional state updates to enqueue each update and have each update from the previous state instead of the state from the callback closure.

Example:

attribute.forEach((item, index) => {
  setIds(ids => ({
    ...ids,
    [index]: item.id,
  }))
});

With the correctly updated ids array state, you should be able to iterate and push values into the other array:

const idsArr = [];
Object.keys(ids).map(key => {
  idsArr.push(ids[key]);
});

Or just get the array of values directly:

const idsArr = Object.values(ids);

Upvotes: 1

jeremy-denis
jeremy-denis

Reputation: 6878

one proposal can be to push the map result in array

idsArr.push(...Object.keys(ids).map(key => ids[key]));

Moreover when you set the id if you don't return nothing the map method should not be used.

A loop like foreach is a better choice

map method is used to get a "transformed" array

  attribute.forEach((item, index) => {
       setIds({ ...ids, [index]: item.id })
  })


let idsArr = [];

let ids = {
  'test': 1,
  'test2': 2
};
idsArr.push(...Object.keys(ids).map(key => ids[key]));

console.log(idsArr);

Upvotes: 2

Related Questions