title: Creating Dynamic Object Keys After mapping on an Array
body: <p>So I want to create a quite complex data structure that looks like the following:</p>
  
  <pre><code>slots: {
      'slot_1': {
           id: 'slot_1',
           associatedCard: {}
           },
      'slot_2': {
           id: 'slot_2',
           associatedCard: {}
           },
      'slot_3': {
           id: 'slot_3',
           associatedCard: {}
           }
  }
  </code></pre>
  
  <p>I have 10 slots that I want to populate with cards (each slot can contain one card) so I am actually looping over the cards, creating the slots and I tried to dynamically generate the above data structure. Here is my code:</p>
  
  <pre><code> slots: (() =&gt; {
          return {
              ...cards.map((card, index) =&gt; {
              return {
                              [`slot_${index + 1}`]: {
                                  id: `slot_${index + 1}`,
                                  ownedCard: {}
                              }
                          };
                      })
                  };
              })(),
  </code></pre>
  
  <p>However, I am not getting what I desire. This is what I get:
  <a href="https://i.stack.imgur.com/T0ohv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T0ohv.png" alt="enter image description here"></a></p>
  
  <p>How can I fix this so that I have slot_1 instead of 0 as key, slot_2 instead of 1 as key, etc..?</p>