title: What is the purpose of spreading props in React Higher Order Components?
body: <p>I'm trying to understand React's Higher Order Component structure, but all the resources just assume you already understand what the purpose of the spread operator is doing in the higher order component when you write:
  BaseComponent {...this.props} {...this.state} . Why is it necessary to spread out the props like that if a component is already being passed in as props?   </p>
  
  <pre><code>import React, { Component } from 'react';
  
  const EnhanceComponent = BaseComponent =&gt; {
      return class EnhancedComponent extends Component {
          state = {
              name: 'You have been enhanced'
          }
          render() {
             return ( 
             &lt;BaseComponent {...this.props} {...this.state} /&gt;   
          )
         }
      }
  };
  
  export default EnhanceComponent;
  </code></pre>