title: destructuring props with the rest properties
body: <p>so as I understand it, this <code>{...props}</code> is the same things as <code>{prop1, prop2, prop3}</code></p>
  
  <p>When declaring a stateless functional component, it is convenient to utilize destructuring so that you don't have to constantly type <code>props.prop1, props.prop2</code> etc. However, when you have 10+ props you need to pass down to your child component things can get very ugly so I thought that I could just use the spread operator to destructure my props object!</p>
  
  <p>Based on the idea that <code>{...props}</code> is essentially the same as <code>{prop1, prop2, prop3}</code> I expected the below code to work, but I get a <code>prop1 is undefined</code> error</p>
  
  <pre><code>const Component = ({...props}) =&gt; {
      return (
          &lt;div&gt;
              {prop1}
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>is what I'm trying to do possible? I couldn't find any examples online, but it would be awesome if there was a way to destructure the props object without explicitly listing every prop!</p>
  
  <p>EDIT: Please understand I know how to properly access properties from the props object. Read my question more carefully, I am trying to spread all the properties in the props object, similar to declaring them explicitly example:</p>
  
  <pre><code>const Component = ({prop1, prop2, prop3}) =&gt; {
      return (
          &lt;div&gt;
              {prop1}
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>I expect that could to behave the same as if I initialize the component with <code>{...props}</code></p>