How to pass parent props through a HOC and use it as normal

Question

I learn react HOC's and cant understand one thing,

I have a HOC like this:

const MyHoc = WrapperComponent => {
    class TheHoc extends React.Component {
        constructor(props) {
            super(props);
            this.someMethod = this.someMethod.bind(this);
        }

        someMethod = () => {
            // ...do stuf
        };

        render() {
            return <WrapperComponent doStuff={this.someMethod} {...this.props} />;
        }
    }
    return TheHoc;
};

export default MyHoc;

When I use it like this:

function HocUser(props) {
    const { close, doStuff } = props;

    const onClickMe = () => {
        close();
        doStuff();
    };

    return (
        <div>
            <MenuLinksSpace />
            <MenuLinks>
            <li>
                    <a onClick={onClickMe} role="presentation">
                        <span className="icon is-medium">
                            <i className="fas fa-user" />
                        </span>{' '}
                        Click me
                    </a>
                </li>
            </MenuLinks>
        </div>
    );
}

export default MyHoc(HocUser);

My problem is that close is now undefined and give error when it should be a function passed from the parent of HocUser.

I do something wrong with my HOC since the close props gets lost

please advice?

UPDATE

Here is the Component that uses the HocUser: like this <HocUser close={close} />

import React, { useRef, useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import useOnClickOutside from './UseOnClickOutside';
import NavLinkPage from './NavLinkPage';
import HocUser from './HocUser';

const CollapseMenu = props => {
    const { show, close } = props;
    const { open } = useSpring({ open: show ? 0 : 1 });

    const reference = useRef();
    useOnClickOutside(reference, close, 'burgerMenu');

    const escFunction = useCallback(
        event => {
            // only accept 27 if it's visible
            if (event.keyCode === 27 && show === true) {
                close();
            }
        },
        [close, show],
    );

    useEffect(() => {
        document.addEventListener('keydown', escFunction, false);
        return () => {
            document.removeEventListener('keydown', escFunction, false);
        };
    }, [escFunction]);

    if (show === true) {
        return (
            <CollapseWrapper
                ref={reference}
                style={{
                    transform: open
                        .interpolate({
                            range: [0, 0.2, 0.3, 1],
                            output: [0, -20, 0, -200],
                        })
                        .interpolate(openValue => `translate3d(0, ${openValue}px, 0`),
                }}
            >
                <NavLinkPage />
                <HocUser close={close} />
            </CollapseWrapper>
        );
    }
    return null;
};

export default CollapseMenu;

const CollapseWrapper = styled(animated.div)`
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
`;

Answer 1

Try this

const MyHoc = WrapperComponent => {
    const someMethod = () => {
        // ...do stuf
    };

    return (props) => {
        return <WrapperComponent doStuff={someMethod} {...props} />;
    };
};

export default MyHoc;

inside HocUser check if close exist or not, then call close function. what if the close is not passed from the parent, you should handle that case also.

const onClickMe = () => {
    if(close) close();
    doStuff();
};

You can check my HOC example here connect is HOC.

Answer 2

I have tried this and this is working fine for me, you can see the working example here...

https://stackblitz.com/edit/react-sghmqc?file=src%2FHOC.jsx