Add properties to objects within an array with React Hooks

Question

Just started learning hooks and came about this problem. I was trying to add the same property to each of the objects within an array as follow:

const array = [ { 'a': 1, 
                  'b': 2, 
                  'c': 3}, 

                { 'd': 4, 
                  'e': 5, 
                  'f': 6} ]

const [ example, setExample ] = useState(array)

The desired result is as follow:

const array = [ { 'a': 1, 
                  'b': 2, 
                  'c': 3, 
                  'g': 7}, 
                
                 { 'd': 4, 
                   'e': 5, 
                   'f': 6, 
                   'g': 7} ]

The function I wrote:

function addG () {
  let toBeAdded = { 'g' : 7 }
  let alteredArray = array.map((object) => {
    return {...object, toBeAdded}
  }
  return alteredArray
}

Then to invoke the function:

const [ example, setExample ] = useState(()=>{addG()})

It is not working haha Would love to be pointed out what I was doing wrong! Thanks in advance!

Iosif · Accepted Answer · 2020-10-22 08:23:10Z

1

you need to deconstruct toBeAdded as well. Like so:

function addG () {
  let toBeAdded = { 'g' : 7 }
  let alteredArray = array.map((object) => {
    return {...object, ...toBeAdded}
  }
  return alteredArray
}

answered Oct 22, 2020 at 8:23

Iosif

8224 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Add properties to objects within an array with React Hooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related