How to update the specific array element index position and specific array of object property in Javascript?

Question

How to update the specific array element index position and specific array of object property in Javascript?. I have below mock data based on object property need to update their respective value using spread operator. I am not able to do that because it is nested.

I am able to achieve using below approach but as you can see code line is getting increased. But we can definitely reduce use spread operator. Because in "title" property i am only updating 0 index and in left column only updating the label value rest of the thing is same.

   const mockData = {
  title: ["Javascript", "Selected Topic"],
  leftColumn: [
    {
      key: "name",
      label: "Javascript Topic Name",
      type: "string",
    },
    {
      key: "id",
      label: "Javasctipt Topic Id",
      type: "string",
    },
  ],
};

const handleType = (val) => {
  switch (val.type) {
    case "Javascript":
      return {
        ...mockData,
      };
    case "Angular":
      return {
        ...mockData,
        title: ["Angular", "Selected Topic"],
        leftColumn: [
          {
            key: "name",
            label: "Angular Topic Name",
            type: "string",
          },
          {
            key: "id",
            label: "Angular Topic Id",
            type: "string",
          },
        ],
      };
    case "React":
      return {
        ...mockData,
        title: ["React", "Selected Topic"],
        leftColumn: [
          {
            key: "name",
            label: "React Topic Name",
            type: "string",
          },
          {
            key: "id",
            label: "Reacr Topic Id",
            type: "string",
          },
        ],
      };
  }
};

Answer 1

Then you could do this:

const handleType = (val) => {
     const newTitle = [val, ...mockData.title.slice(1)];
     const newLeftColumn = mockData.leftColumn.map((arrValue) => {
          const newLabel = arrValue.label.split(" ");
          newLabel[0] = val;
          return {
               ...arrValue,
               label: newLabel.join(" "),
     })

     return {
          title: newTitle,
          leftColumn: newLeftColumn,
     }
}
     

Thats how you can even add things to the title or leftColumn array, and still will be working.