score:0

Accepted answer

a higher-order component is a function that takes a component and returns a new component.

your hoc is a function that returns a function that returns a component.

you can just return the class directly inside the hoc:

const witherrorboundary = <p extends {}>(
  wrappedcomponent: react.componenttype<p>,
) => {
  type props = p & wrapperprops;

  return class errorboundary extends component<props, state> {
    public static getderivedstatefromerror(error: any) {
      return { haserror: true };
    }

    constructor(props: props) {
      super(props);
      this.state = { haserror: false };
    }

    public componentdidcatch(error: any, errorinfo: any) {
      console.error(error, errorinfo);
    }

    public onbackclick() {
      window.location.reload();
    }

    public render() {
      const { classes, ...props } = this.props;

      if (this.state.haserror) {
        return (
          <container classname={classes.root}>
            <box
              display="flex"
              flexdirection="column"
              justifycontent="center"
              aligncontent="center"
            >
              <typography color="primary" variant="h4">
                ops, ocorreu um erro inexperado. clique abaixo para voltar.
              </typography>
              <button
                color="primary"
                variant="contained"
                onclick={this.onbackclick}
              >
                tentar novamente
              </button>
            </box>
          </container>
        );
      }

      return <wrappedcomponent {...(props as p)} />;
    }
  };
};

Related Query

More Query from same tag