Update objects within an array

Original array (form[id].values.sections) made up of different objects

(3) [{…}, {…}, {…}]
    1. 0: 
        1. attachments: Array(0)
            1. length: 0
            2. [[Prototype]]: Array(0)
        2. body: "" // How do i update the values here without the original array being converted into an object
        3. [[Prototype]]: Object
    2. 1: {body: '', attachments: Array(0)}
    3. 2: {body: '', attachments: Array(0)}
    4. length: 3
    5. [[Prototype]]: Array(0)

If i use the following method to update body, it turns into an object as shown below

        updatedSections = {
          ...form[id].values.sections,
          0: {
            body: contentBody, attachments: form[id].values.sections[0].attachments,
          },
        };

updatedSection becomes an object.

{0: {…}, 1: {…}, 2: {…}}
    1. 0: 
        1. attachments: Array(0)
            1. length: 0
            2. [[Prototype]]: Array(0)
        2. body: "<p>Content update here</p>"
        3. [[Prototype]]: Object
    2. 1: {body: '', attachments: Array(0)}
    3. 2: {body: '', attachments: Array(0)}
[[Prototype]]: Object

>Solution :

You’ve converted your array into an object by using

updatedSections = { ... }

If you want it to remain an array, you need to use array notation e.g.

updatedSections = [
  {
     body: contentBody, 
     attachments: form[id].values.sections[0].attachments,
  },
  ...form[id].values.sections.slice(1)
]