title: Higher-Order Components in ReactJS - extend functionalities from data components
body: <p>I'm sorry for the stupid question, I'm learning React so I'm not expert at all.</p>
  
  <p>I'm wondering if there is a way to extend my stateless components with some functionalities without creating always wrappers around them that they'll connect to the Redux store and pass data through props.</p>
  
  <p>Is it the higher order component the best way to do that?</p>
  
  <p>Let me explain better with a few lines of code.
  The example component below should call an API /favourites (POST) on the user click event in order to create a "Favourite" entity and it will call the same API (DELETE) in order to delete it.</p>
  
  <p>This is the solution that I've realized:</p>
  
  <pre><code>const HOC_DISPLAY_NAME = 'HOCFavouriteIcon';
  export default function HOCWrapperFavourite(FavouriteComponent) {
  
  return class extends React.Component {
  
      static displayName = HOC_DISPLAY_NAME;
  
      constructor(props) {
          super(props);
          this.state = this.getDefaultState();
          this.bindMethods();
      }
  
      getDefaultState() {
          return {
              isFavourite: false,
              addFavouritePayload: null,
              removeFavouritePayload: null,
          };
      }
  
      render() {
          return (
              &lt;DataProviderApiFavourites
                  create={this.state.addFavouritePayload}
                  createListener={this.favoriteCreateHandler}
                  delete={this.state.removeFavouritePayload}
                  deleteListener={this.favoriteDeleteHandler}
              &gt;
                  &lt;FavouriteComponent
                      {...this.props}
                      {...this.state}
                      addFavourite={this.addFavouriteClickHandler}
                      removeFavourite={this.removeFavouriteClickHandler}
                  /&gt;
              &lt;/DataProviderApiFavourites&gt;
  
          );
      }
  
      addFavouriteClickHandler(visitorId, artId) {
              this.setState({
                  addFavouritePayload: {visitorId, artId},
              });
      }
  
      removeFavouriteClickHandler(visitorId, favouriteId) {
              this.setState({
                  removeFavouritePayload: {visitorId, favouriteId},
              });
      }
  
      favoriteCreateHandler(result){
          // do something when a favorite entity was created
      }
  
      favoriteDeleteHandler(result){
          // do something when a favorite entity was deleted
      }
  
      bindMethods() {
          this.addFavouriteClickHandler = this.addFavouriteClickHandler.bind(this);
          this.removeFavouriteClickHandler = this.removeFavouriteClickHandler.bind(this);
          this.favoriteCreateHandler = this.favoriteCreateHandler.bind(this);
          this.favoriteDeleteHandler = this.favoriteDeleteHandler.bind(this);
      }
  
  }
  </code></pre>
  
  <p>};</p>
  
  <p>The DataProviderApiFavourites has a property "create" that accepts a JSON payload, it will trigger a Redux action caught by Saga ( who will call an API ) and it also is able to notify the result through createListener function.
  It does the same with the delete prop ( but it will call the delete API and will notify through favoriteDeleteHandler ).</p>
  
  <p>Considering that the FavouriteComponent is a stateless component, is it a good structure in order to use functionality from data components in UI components?</p>
  
  <p>Actually, the DataProviderApiFavourites could be used without nesting the child component, it returns null or this.props.children if is set. </p>
  
  <p>I'll really appreciate if someone will help me to understand if I'm going to do something wrong.</p>