React HOC can't pass props?-CodePudding

I tried to pass description=Button props to Button Component using HOC. so that, I expected to render like, `Button

But, Empty Button Elements is Rendered!

My codeSandBoxLink:enter link description here

Button.jsx

import React from 'react'
import withLoading from './withLoading'

function Button() {
    return <button></button>
}
export default withLoading(Button)

withLoading.jsx

export default function withLoading(Component) {
  const WithLoadingComponent = (props) => {
    return <Component>{props.description}</Component>
    );
  };

  return WithLoadingComponent;

App.jsx

return(
 <div>
    <Button description="button"><Button>
 </div>
)

Thanks for any help.

CodePudding user response：

At Button compnent, you need to use props and follow your code so that is props.description.

function Button(props) {
  return <button>{props.description}</button>;
}

At withLoading HOC, you need to pass all props for Component.

//HOC Example
export default function withLoading(Component) {
  const WithLoadingComponent = (props) => {
    const [loading, setLoading] = React.useState(true);
    console.log("props:", props.description);
    //delay 3sec...
    React.useEffect(() => {
      const timer = setTimeout(() => {
        setLoading(false);
      }, 3000);
      return () => clearTimeout(timer);
    }, []);

    return loading ? <p>loading...</p> : <Component {...props} />;
  };

  return WithLoadingComponent;
}

I have been fork and then fixed it. You can refer by this link: https://codesandbox.io/s/strange-cerf-glxquu?file=/src/withLoading.jsx