How to access props in a functional HOC?

Question

I have code similar to the following:

const HOC = (props, WrappedComponent) => {
    return (
       <>
          <WrappedComponent />
          <Icon className="props.iconStyles" />
       </>
     );
};

This is not actually valid code, but you can hopefully see what I'm trying to accomplish. I want to be able to use it in the following way:

<HOC iconStyles="icon-stuff">
    <TheComponentIWantToWrap>
</HOC>

How can I write this correctly, so as to be able to pass props through? I think I might need to be using children here too, not sure.

Answer 1

It would be something like this.

const HOC = (WrappedComponent) => {

  const MyComponent = props => {
    return (
       <>
          <WrappedComponent {...props} />
          <Icon className={props.iconStyles} />
       </>
     );
   }
   
  return MyComponent;
};