title: Merge multiple dynamic arrays into a single array of objects
body: <p>Sorry for the confusing title, I have a problem where I have 3 dynamic arrays (can be empty):</p>
  
  <pre><code>const titles = ["Title 1", "Title 2", "Title 3"]
  const subtitles = ["Subtitle 1", "Subtitle 2"]
  const contents = ["Content 1"]
  </code></pre>
  
  <p>and I need to change them into:</p>
  
  <pre><code>const newArr = [
      { title: "Title 1", subtitle: "Subtitle 1", content: "Content 1" },
      { title: "Title 2", subtitle: "Subtitle 2" },
      { title: "Title 3" }
  ]
  </code></pre>
  
  <p>My attempt to solve this:</p>
  
  <pre><code>const newState = []
  
  titles.map((titleItem, index) =&gt; { newState[index] = { title: titleItem } });
  subtitles.map((subtitleItem, index) =&gt; { newState[index] = { subtitle: subtitleItem } });
  contents.map((contentItem, index) =&gt; { newState[index] = { content: contentItem } });
  </code></pre>
  
  <p>but sadly, this overwrites the newState for every map.</p>