Push item to a nested object array

Question

I have an object with nested objects with the below structure, how can I dynamically add new items (newData) to the cost3 array?

I have tried that but the new data isn't being pushed, what am I doing wrong?

const [file, setFile] = useState({})

setFile(file=> ({
      ...file,
      [cost3]: {
          ...file.cost3,
          newData
      }
}))

File object:

{
      "info": {

      },
      "client": {

      },
      "costs": {
        "cost1": 1,
        "cost2": 5,
        "cost3": [
          {
            "a": "test",
            "b": "test",
            "c": "test",
          },
          {
            "d": "test",
            "e": "test",
            "f": "test",
          },
         //etc..       
        ],
        "cost4": [
          {
            "l": "test",
            "n": "test",
            "m": "test",
          },
        //etc..
        ]
      }
    }

What is [const3] in setFile, I don't see you define the const3 variable anywhere. — HMR
– HMR, Commented Oct 11, 2019 at 7:00

giuseppedeponte · Accepted Answer · 2019-10-11 06:45:58Z

2

const file = {
  "info": {

  },
  "client": {

  },
  "costs": {
    "cost1": 1,
    "cost2": 5,
    "cost3": [{
        "a": "test",
        "b": "test",
        "c": "test",
      },
      {
        "d": "test",
        "e": "test",
        "f": "test",
      },
      //etc..       
    ],
    "cost4": [{
        "l": "test",
        "n": "test",
        "m": "test",
      },
      //etc..
    ]
  }
}

const newData = { x: 'I am new' }

console.log(
  {
    ...file,
    costs: {
      ...file.costs,
      cost3: [
        ...file.costs.cost3,
        newData
      ]
    }
  }
)

answered Oct 11, 2019 at 6:45

giuseppedeponte

2,3711 gold badge12 silver badges20 bronze badges

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

1 Comment

HMR Over a year ago

If you see how state is initialezed useState({}) you can conclude that ...file.costs.cost3, will throw a "const3 of undefined" error. I would suggest using some sort of get to make it less error prone.

UtkarshPramodGupta · Accepted Answer · 2019-10-11 07:35:38Z

2

Your code is incorrect.

Replace [cost3] with cost3 and {} with [], like so:

setFile(file=> ({
      ...file,
      costs: {
        ...file.costs,
        cost3: [
          ...file.costs.cost3,
          newData
        ]
      }
}))

edited Oct 11, 2019 at 7:35

answered Oct 11, 2019 at 7:06

UtkarshPramodGupta

8,2887 gold badges38 silver badges57 bronze badges

1 Comment

HMR Over a year ago

Looks like OP is trying to set file.const.const3 but since file is initialized with {} trying to spread file.const.const3 will throw because const is initially undefined. Maybe better to use some sort of get

HMR · Accepted Answer · 2019-10-11 07:27:32Z

0

You can try it using concat.

cost3 = [];
const [file, setFile] = useState({});

setFile(file => ({
  cost3: file.cost3.concat(newData),
}));

edited Oct 11, 2019 at 7:27

HMR

39.5k26 gold badges99 silver badges176 bronze badges

answered Oct 11, 2019 at 7:00

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

1 Comment

HMR Over a year ago

I would suggest using concat instead of push because push will mutate the array.

Atul Joshi · Accepted Answer · 2019-10-11 06:50:52Z

-1

You can use .push() method to add item to object, for dynamic addition you can iterate through the array.

answered Oct 11, 2019 at 6:50

Atul Joshi

152 bronze badges

Collectives™ on Stack Overflow

Push item to a nested object array

4 Answers 4

1 Comment

Your code is incorrect.

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Your code is incorrect.

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related