reactjsreact-propsreact-hoc

React HoC - props are not passed to wrapped component


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);

Solution

  • 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