Skip to content

Instantly share code, notes, and snippets.

@distributedlife
Created January 4, 2017 04:16
Show Gist options
  • Save distributedlife/b6f8e53539d9d5ff3f2529b26452d498 to your computer and use it in GitHub Desktop.
Save distributedlife/b6f8e53539d9d5ff3f2529b26452d498 to your computer and use it in GitHub Desktop.
A react component example that shows loading while an async action is in progress, an error if the promise is rejected and the true component if everything works out for the best
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.state = { error: false };
}
componentWillMount() {
const { asyncAction, id, loading } = this.props;
if (loading) {
asyncAction(id).catch(() => (this.setState({ error: true })));
}
}
render() {
const { loading } = this.props;
if (this.state.error) {
return (<SomeErrorComponent />);
}
if (loading) {
return (<SomeLoadingComponent />);
}
return (<Content />);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment