Push elements into existing array in React Hooks

Question

let's say I have an array

const defaultList = [
  {
    "name":"John",
    "last_name":"doe"
  },
  {
    "name":"Alice",
    "last_name":"Smith"
  }
]

I want using for loop to add new value online, so in the end it will look like this

const defaultList = [
      {
        "name":"John",
        "last_name":"doe",
        "online":"yes"
      },
      {
        "name":"Alice",
        "last_name":"Smith",
         "online":"no"
      }
    ]

I am using React Hooks and array is defined in this way, where later I fill it with data above:

const [defaultList, setDefaultList] = useState([]);

I would appreciate any idea how to do it?

Thank You!

hgb123 · Accepted Answer · 2020-09-15 07:14:50Z

1

You could use .map

const res = defaultList.map(el => ({ ...el, online: 'yes' })

const defaultList = [
  {
    name: 'John',
    last_name: 'doe'
  },
  {
    name: 'Alice',
    last_name: 'Smith'
  }
]

const res = defaultList.map(el => ({ ...el, online: 'yes' }))

console.log(res)

Or .forEach with Object.assign()

defaultList.forEach(el => {
  Object.assign(el, { online: 'yes' })
})

const defaultList = [
  {
    name: 'John',
    last_name: 'doe'
  },
  {
    name: 'Alice',
    last_name: 'Smith'
  }
]

defaultList.forEach(el => {
  Object.assign(el, { online: 'yes' })
})

console.log(defaultList)

..which is equivalent to the for..of loop

for (const el of defaultList) {
  Object.assign(el, { online: 'yes' })
}

const defaultList = [
  {
    name: 'John',
    last_name: 'doe'
  },
  {
    name: 'Alice',
    last_name: 'Smith'
  }
]

for (const el of defaultList) {
  Object.assign(el, { online: 'yes' })
}

console.log(defaultList)

The difference is that the first method creates the whole new array, while the others is mutating the original one

answered Sep 15, 2020 at 7:14

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

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

1 Comment

faerin Over a year ago

The map approach is definitely the better choice :)

Hoàng Kim Minh · Accepted Answer · 2020-09-15 07:03:56Z

0

You can't have 2 two variables with the same name Firstly, set default state by:

const [list, setList] = useState(defaultList)

After change to new list, call setList

setList(newDefaultList)

Use list for what you want instead of defaultList

answered Sep 15, 2020 at 7:03

Hoàng Kim Minh

1723 bronze badges

Collectives™ on Stack Overflow

Push elements into existing array in React Hooks

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related