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