Is it possible to transfer array with data to another component by react-redux in HOC

Question

I may be missing something, but I can't find any example how to pass array with data from HOC component to another component. Here is my code

 import React from 'react' import NoAccessPage from '../../pages/Admin/NoAccess'; import { menuItems } from '../../config/menu'; import {connect} from 'react-redux' const AuthorizationHOC = (access) =>{ (WrappedComponent) => class WithAuthorization extends React.Component { constructor(props) { super(props) this.state = { user: { accessItems: [ 'reseptionPointsAccess', 'servicesAccess' ] } } } render() { const { accessItems } = this.state.user; let menuAccess = []; menuItems.forEach(item => { if (accessItems.includes(item.access)) { menuAccess.push(item) } }) return ( <div> {accessItems.includes(access) ? <WrappedComponent {...this.props} /> : <NoAccessPage/> } </div> ) } } } const mapStateToProps = state => { return { menuArray: state } } export default connect(mapStateToProps)(AuthorizationHOC) 

I would like to pass array menuAccess to another component, but I can't wrap AuthorizationHOC by connect.

In console I received

Cannot call a class as a function

Answer 1

You don't need to wrap the HOC with connect, what you need is to wrap the returned component with connect

import React from 'react'
import NoAccessPage from '../../pages/Admin/NoAccess';
import { menuItems } from '../../config/menu';
import {connect} from 'react-redux'

const AuthorizationHOC = (access) =>{
  (WrappedComponent) => {
     class WithAuthorization extends React.Component {
      constructor(props) {
        super(props)

        this.state = {
          user: {
              accessItems: [
                'reseptionPointsAccess',
                'servicesAccess'
              ]
          }
        }
      }

      render() {
          const { accessItems } = this.state.user;

          let menuAccess = [];

          menuItems.forEach(item => {
              if (accessItems.includes(item.access)) {
                  menuAccess.push(item)
              }
          })

          return (
              <div>
                  {accessItems.includes(access) ? <WrappedComponent {...this.props} /> : <NoAccessPage/> }
              </div>
          )
      }
    }
    return connect(mapStateToProps)(WithAuthorization);
  }
}
const mapStateToProps = state => {
    return {
        menuArray: state
    }
}

export default AuthorizationHOC;

Answer 2

Okey, I have tried to use this code, and now I have got this error in console:

 (0 , _AuthorizationHOC2.default)(...) is not a function 

This error shows up during rendering my HOC

 <Route path="/link" exact component={AuthorizationHOC('listOfOrdersAccess')(ListOfOrders)} />