React HoC - props are not passed to wrapped component

Question

I have two HoC component. First have to serve as some Layout wrapper which will contain some logic for mobile rendering etc.

const LayoutWrapper = (Component: React.FC<any>): React.FC<any> => {
const Layout = () => {
    const [layout, set] = React.useState("layout state");
    return <Component
        layout={layout}
    />;
}
    return Layout; 
} export default LayoutWrapper;

Second HoC will take care of if user is logged in.

const Secured = (Component: React.FC<any>): React.FC<any> => {
const Wrapped = () => {
    const [securedPagestate, set] = React.useState("secured page state");
    const Layout = LayoutWrapper(Component);
    return <Layout test={securedPagestate} />
}
    return Wrapped;
}

export default Secured;

I have wrapped homepage component which will render actual page, and it needs to have props passed from both HoC components which are shown above, but I only get props passed from LayoutWrapper Hoc and not from Secured Hoc component. What is actually wrong with it?

const HomepageView = (props: HomepageViewProps) => {
    return <>HOMEPAGE</>;
}

export default Secured(HomepageView);

Not 100% sure about this but I think you might need to pass the remaining props inside both HOCs, e.g: `return ` — ant_1_b, Apr 26 '20 at 09:56

HermitCrab · Accepted Answer · 2020-04-26T10:21:34.417

1

If you want to pass props to your wrapped components, you have to do it this way:

const Layout = (props) => {

const Wrapped = (props) => {

In the React world, HOC are functions, not components, therefore they should start with a lower case letter: layoutWrapper and secured

edited Apr 26 '20 at 10:21

answered Apr 26 '20 at 10:15

HermitCrab

3,194
1
11
10

score 0 · Answer 2 · edited Sep 14 '22 at 04:47

// HIGHER ORDER COMPOENTS IN REACT
// Higher order components are JavaScript functions used for adding 
// additional functionalities to the existing component.


// file 1:  hoc.js (will write our higher order component logic) -- code start -->

const messageCheckHOC = (OriginalComponent) => {
  // OriginalComponent is component passed to HOC

  const NewComponent = (props) => {

    // business logic of HOC 
    if (!props.isAllowedToView) {
      return <b> Not Allowed To View The MSG </b>;
    }

    // here we can pass the props to component
    return <OriginalComponent {...props} />;
  };

  // returning new Component with updated Props and UI
  return NewComponent;
};

export default messageCheckHOC;

// file 1:  hoc.js  -- code end -->


// file 2: message.js  -- code start -->
// this is the basic component we are wrapping with HOC 
// to check the permission isAllowedToView msg if not display fallback UI

import messageCheckHOC from "./hoc";

const MSG = ({ name, msg }) => {
  return (
    <h3>
      {name} - {msg}
    </h3>
  );
};

export default messageCheckHOC(MSG);
// file 2: message.js  -- code end -->


// file 3 : App.js -- code start --->
import MSG from "./message.js";

export default function App() {
  return (
    <div className="App">
      <h3>HOC COMPONENTS </h3>
      <MSG name="Mac" msg="Heyy !!! " isAllowedToView={true} />
      <MSG name="Robin" msg="Hello ! " isAllowedToView={true} />
      <MSG name="Eyann" msg="How are you" isAllowedToView={false} />
    </div>
  );
}

// file 3 : App.js -- code end --->

React HoC - props are not passed to wrapped component

2 Answers2