Skip to content

Instantly share code, notes, and snippets.

@tetrashine
Last active January 18, 2022 23:59
Show Gist options
  • Save tetrashine/13a84f571a3e0e7ebc579380b57cb868 to your computer and use it in GitHub Desktop.
Save tetrashine/13a84f571a3e0e7ebc579380b57cb868 to your computer and use it in GitHub Desktop.
function DisplayPosts({posts}) {
return (
<ul>
{ posts.map(({id, text}) => (<li key={id}>{text}</li>)) }
</ul>
);
}
function loaderHoc(Component) {
return class LoaderComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
data: {}
};
fetch(props.url).then(_ => this.setState({ loaded: true, data: _ }));
}
render() {
const { url, propsExceptUrl } = this.props;
const { loaded, data } = this.state;
return (loaded ? "Loading..." : <Component {...propsExceptUrl} {...data} />);
}
}
}
const LoaderDisplay = loaderHoc(DisplayPosts);
<LoaderDisplay url="..." />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment