ErrorBoundary: use correct types for child components/fallbacks

This commit is contained in:
rektdeckard
2020-08-03 18:22:07 -04:00
parent 528a4fcf8d
commit 7636a1f85e

View File

@@ -1,22 +1,29 @@
import React, { ErrorInfo } from "react"; import React, { ErrorInfo } from "react";
interface ErrorBoundaryProps { interface ErrorBoundaryProps {
fallback?: JSX.Element; fallback?: JSX.Element | React.ReactNode;
} }
export default class ErrorBoundary extends React.Component<ErrorBoundaryProps> { interface ErrorBoundaryState {
state = { errorMessage: "" }; errorMessage?: string
}
export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: any) {
super(props);
this.state = { errorMessage: "" }
}
static getDerivedStateFromError(error: any) { static getDerivedStateFromError(error: any) {
return { errorMessage: error.toString() }; return { errorMessage: error.toString() };
} }
componentDidCatch(error: any, info: ErrorInfo) { componentDidCatch(error: any, info: ErrorInfo) {
console.error(error); void(error);
console.info(info); console.info(info);
} }
render() { render(): JSX.Element | React.ReactNode {
if (this.state.errorMessage) { if (this.state.errorMessage) {
return this.props.fallback ?? <p>{this.state.errorMessage}</p>; return this.props.fallback ?? <p>{this.state.errorMessage}</p>;
} }