title: Why is destructuring and concatenation leaving different types of undefined in array?
body: <p>Here is my code</p>
  <pre><code>console.log(this.state.pins);
  this.setState({ pins: [...this.state.pins, ...block] });
  console.log(this.state.pins);
  </code></pre>
  <p>Here is what we see in the console...</p>
  <p><a href="https://i.stack.imgur.com/tWtOt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWtOt.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/seknf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/seknf.png" alt="enter image description here" /></a></p>
  <p>More experementation... When I set my code to this.</p>
  <pre><code>this.setState({pins: this.state.pins.concat(block)});
  </code></pre>
  <p><a href="https://i.stack.imgur.com/lwunr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwunr.png" alt="enter image description here" /></a></p>
  <p>So here I am using a <code>map</code> function.</p>
  <pre><code>{pins.map(pin =&gt; &lt;PinnedBlock blockId={pin} /&gt; )}
  </code></pre>
  <p>When I use the above map function on this array:</p>
  <pre><code>this.setState({ pins: [...this.state.pins, ...block] }); 
  </code></pre>
  <p>I get a <code>&lt;PinnedBlock blockId={pin} /&gt; </code> where <code>pin</code> is undefined.</p>
  <p>When I use the above map function on this array:</p>
  <pre><code>this.setState({pins: this.state.pins.concat(block)});
  </code></pre>
  <p>I do not get an output corresponding to undefined.</p>
  <p>Can someone explain help me understand what is happening here?</p>