title: React.js & [...] (spread) syntax
body: <p>Based on an example in page: <a href="https://redux.js.org/basics/usage-with-react" rel="nofollow noreferrer">https://redux.js.org/basics/usage-with-react</a></p>
  
  <p>We have the following item:</p>
  
  <pre><code>const Todo = ({ onClick, completed, text }) =&gt; (
    &lt;li
      onClick={onClick}
      style={{
        textDecoration: completed ? 'line-through' : 'none'
      }}
    &gt;
      {text}
    &lt;/li&gt;
  )
  
  Todo.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }
  </code></pre>
  
  <p>Also, we have the:</p>
  
  <pre><code>const TodoList = ({ todos, onTodoClick }) =&gt; (
    &lt;ul&gt;
      {todos.map((todo, index) =&gt; (
        &lt;Todo key={index} {...todo} onClick={() =&gt; onTodoClick(index)} /&gt;
      ))}
    &lt;/ul&gt;
  )
  </code></pre>
  
  <p>Can someone please tell me what is the {...todo} on the above code?</p>
  
  <p>I know that the ... operator is a spread syntax and is used lets say as [...todos, newTodoItem] (to concatenate new todo item to the old todos list).
  But, in the example above, todo item is not an array and it seems like it generates an object. As such for me it looks like {...todo} is equal to {todo}.</p>
  
  <p>Also, what kind of properties are getting assigned on the  component?</p>