title: Why is a spread operator required when using .map() in React, but not in plain JavaScript?
body: <p>In a React application, I'm passing in this array of objects to a component:</p>
  <pre><code>const flashcards = [
      {
          &quot;back&quot;: &quot;bbb1&quot;,
          &quot;front&quot;: &quot;fff1&quot;,
          &quot;id&quot;: 21
      },
      {
          &quot;back&quot;: &quot;bbb2&quot;,
          &quot;front&quot;: &quot;fff2&quot;,
          &quot;id&quot;: 22
      },
      {
          &quot;back&quot;: &quot;bbb3&quot;,
          &quot;front&quot;: &quot;fff3&quot;,
          &quot;id&quot;: 20
      }
  ];
  </code></pre>
  <p>In the component, when I map through the array, why do I need to have a spread operator in order to send individual items from the array to the next lower component (Flashcard), e.g. like this:</p>
  <pre><code>render() {
      return (
          &lt;div className=&quot;app&quot;&gt;
              &lt;div&gt;
                  {this.props.flashcards.map(flashcard =&gt;
                      &lt;Flashcard {...flashcard} key={flashcard.id} /&gt;
                      )}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>This seems superfluous, since when I use map in plain JavaScript on the same array, I do not need the spread operator, e.g.:</p>
  <pre><code>flashcards.map(flashcard =&gt; console.log(flashcard.front));
  </code></pre>