Error with spread operation in array. TS1005: ',' expected. TypeScript

Question

I cannot figure out what I missed on line row.sections[SECTION_ID. It always show me a typo error ','...

FAQ: sections - is an array with objects inside. In this case I'm trying modify the specific object of the sections founded by custom flag SECTION_ID.

P.S.

I also tried to put row.sections[SECTION_ID] inside an extra brackets [], but unfortunately it does not help... Any solutions?

  rows: state.rows.map(
    row =>
      row.ID === action.rowID
        ? {
            ...row,
            sections: [
              ...row.sections,
              row.sections[SECTION_ID]: { // error is here
                ...row.sections[SECTION_ID],
                data: {
                  ...// some data
                }
              }
            ]
          }
        : row
  )

Is sections meant to be an array or an object? It's written with square brackets, making it an array, but then you're trying to put a key/value pair inside it like an object. — Nicholas Tower, Dec 07 '18 at 17:13
@NicholasTower hi! `sections ` is an array with objects inside, yes. In this case I try to modify the specific object of the `sections` by custom flag `SECTION_ID` to found it in the array — Max Travis, Dec 07 '18 at 17:14
ok, then are you trying to push an object to the end of the array, or replace an object at a certain index? — Nicholas Tower, Dec 07 '18 at 17:15
It's hard to tell what output you're trying to get here. Should the second element in your `sections` array be an object? — Kirk Larkin, Dec 07 '18 at 17:15
@KirkLarkin hi!. The all elements of the `sections` are the `objects`. — Max Travis, Dec 07 '18 at 17:16
@NicholasTower In this case I try to modify the specific `object` of the `sections` founded by custom flag `SECTION_ID`. — Max Travis, Dec 07 '18 at 17:17

score 2 · Accepted Answer · answered Dec 12 '18 at 07:35

You cannot mutate some element inside array by spread operation in such way. Using this approach you'll jus add a new, mutated element to the same array each time. So, it you want to make it right, you need to use the map iterator instead:

rows: state.mymaps.rows.map(
    row =>
      row.ID === action.rowID
        ? {
            ...row,
            sections: row.sections.map(
              (section, index) =>
                index === JOIN_SECTION_ID
                  ? {
                      ...section,
                      data: {
                        ...section.data
                      }
                   } : section
             )
          } : row
)

score 0 · Answer 2 · answered Dec 07 '18 at 17:25

If you're trying to replace an element at a certain index of the array without mutating the array, you can make a shallow copy of the array, and then set the value at that index. For example:

state.rows.map((row) => {
  if (rowID !== action.rowID) {
    return row;
  }
  const sectionCopy = [...row.sections];
  sectionCopy[SECTION_ID] = {
    ...row.sections[SECTION_ID],
    data: {
      // some data
    },
  };
  return {
    ...row,
    sections: sectionCopy,
  };
});

Thanks, I also do the same trick in my question post and it does not work via ternary operators, that is the question why... — Max Travis, Dec 07 '18 at 20:40

Error with spread operation in array. TS1005: ',' expected. TypeScript

2 Answers2