A render prop to resolve products as a cross-cutting concern

WithCrossCuttingConcerns.js

// src/WithCrossCuttingConcerns.js
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import client from './feathers'

class WithCrossCuttingConcerns extends Component{

    state={
        products:[],
    }

    componentDidMount(){
        this.fetchFromRemote()
   client.service('products').on('created',()=>this.fetchFromRemote());
    }

    fetchFromRemote =()=>client.service('products').find({
        query: {
              $sort: {
                  price: -1 // sort them by price descending
                }
             }
        }).then(
              res=>this.setState({products:res.data})
         )
    
  
    render(){
        const {render,} =this.props;
        const{products}=this.state
        
          return (
            
            <div>
            {render({products})}
           </div>
           )
    }
} 

WithCrossCuttingConcerns.propTypes={
    render:PropTypes.func.isRequired,
}

export default WithCrossCuttingConcerns