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)} />;
}
};
};
Source: stackoverflow.com
Related Query
- Exporting HOC component along withStyles MUI
- Exporting React component with multiple HOC wrappers?
- Typescript props not matching component props when using withStyles HOC from Material UI
- How to center a component in MUI and make it responsive?
- What is the MUI Box component for?
- HOC - Functional Component
- Difference between using a HOC vs. Component Wrapping
- MUI - How to align a component to the center/right?
- React TypeScript HoC - passing Component as the prop
- Typescript with React - use HOC on a generic component class
- React Redux use HOC with connected component
- Extending an MUI component gives TS error about "css" property missing
- Adding type definitions to an HOC which injects props into a component
- React exporting withRouter and withStyles error
- component definition is missing display name on HOC
- MUI Fade component does not show, hide, or fade components
- Can't declare keyframe within withStyles HOC (container.addRule(...).addRule is not a function)
- MUI styled cannot pass component prop to Typography in typescript
- Defining and exporting HOC in React
- Pass function from HOC to component (React, React native)
- Passing React context through an HOC to a wrapped component
- Mui v5.0.4 makeStyles, withStyles won't apply styles to mui components
- exporting a react component as npm package
- MUI v5 - Seperate styling from component file
- React TypeScript - Exporting more than one component
- Why does custom Button component using MUI Button not work on hover with Tooltip?
- How to retrieve ref from hoc translated component by i18next
- Should we import a whole library or a specific individual component when using along Create-React-App?
- Gradient border on MUI component
- <Query> vs graphql Hoc which is best way to hook graphql query with component in react apollo
More Query from same tag
- `display: none` vs conditional render in React
- How to concatenate dynamic values in React (JSX)
- webpack build failed
- SecurityError: The operation is insecure - React Heroku
- Pass a valid time type usnig moment from React setState to postgres
- union for array of object in typescript?
- React - iterating over key value pairs in array
- Manipulating DOM in react
- react-datepicker, issues disabling a specific Date
- onChange of Drop down semantic-ui not working
- Execute api request when user stops typing search box
- Deploying ReactJS application in production (with nodeJS backend)
- How do I link to another page within a Shopify Embedded App?
- React-router-dom link route to target page after refresh
- Typescript --- Type 'string' is not assignable to type 'never'
- How to sort a key in array of object and render just one object
- Component is briefly rendering without styles on first render
- Implement a generic that is an object in TypeScript
- How to start React JS application in background mode on linux?
- React tabulator ref becomes null on rerendering
- antd protable unable to change language to english
- Converting dash's(plotly) react functional component into class component
- ReactJS is calling the render method before it receives the data to render
- How do I test the frontend of my django/react app?
- Property 'files' is missing in type 'EventTarget & HTMLTextAreaElement'
- How to get the X and Y coordinates of the mouse click in percentage using ReactJs
- Why should event listeners be removed in Reactjs?
- How to run the Deck.gl getting started examples
- Adding multiple markers to react google maps while using geocoder
- Change CSS of styled-components with react in Class components