Stack Overflow
Stack Overflow

Questions tagged [react-hoc]

Use this tag when you have questions regarding the HOC techinque, commonly used with React to enrich existing components with additional behaviour.

HOC, abbreviation for higher order component is a technique commonly used in the ReactJS library, usually to enrich another component's behaviour, for example, by passing to it additional data or functions via props. Usually this enrichment happens by using a helper function (HOC function) which takes as one of its parameters an existing component's type and returns the new, enriched component. A very popular example of HOC usage is the connect function in react-redux library to provide a component with pieces of redux state.

63 questions
30
votes
2 answers

Property does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

I have react project created by Create-React-App having following packages (mentioning packages related to my issue) : "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typescript":…
Ritesh
  • 4,720
  • 6
  • 27
  • 41
4
votes
4 answers

How to make a lazy loading high order component in React

So here is the main idea, HOC that is be able to load any wrapped in component with React.lazy and React.Suspense. Is it possible??? So, I already was able to write some, but not sure that I was able to made properly... import React, { Suspense,…
Doniyor Otamurodov
  • 111
  • 2
  • 9
3
votes
1 answer

React HOC: Pass data attributes to the first child/element of wrapped component

I have a hoc component like this: export const withAttrs = (WrappedComponent) => { const ModifiedComponent = (props) => ( ); return ModifiedComponent; }; export default…
Afsanefda
  • 3,069
  • 6
  • 36
  • 76
3
votes
1 answer

what is the right way to use forwardRef with withRouter

I just tried to use forwardRef with a withRouter(mycomponent) like this : export default function App() { const childRef = useRef(); const childWithRouteRef = useRef(); useEffect(()=>{ …
jjzjx118_2
  • 419
  • 7
  • 23
2
votes
2 answers

React How to send a prop to a functional component being used inside of a HOC?

I'm curious if it is possible to achieve this when using functional components? Inside of my App.js, found in the first code snippet below, I want to send a Component (here: PageMain) with some props to the HOC. When trying to do this by sending a…
Programmosaurus
  • 111
  • 1
  • 8
2
votes
2 answers

Children in Parent Functional Component are not Re-rendering on Props Change

I'm dynamically generating children components of HOC parent (see below). I pass the props directly to one of children and set the prop in it. I expect to see child re-rendering on props change but it doesn't. Is the code incorrect…
Waleed93
  • 1,130
  • 2
  • 15
  • 24
2
votes
1 answer

How to test React HOC function that is not passed into the wrapped component?

I have a HOC like so and I want to test the getStuff2 function: function withHoc(aComponent) { class hocClass extends React.Component { getStuff1 = () => { } getStuff2 = () => { } render() { return
covfefe
  • 2,485
  • 8
  • 47
  • 77
2
votes
2 answers

React hooks inside a curry function (creating a HOC) returning an error from linter 'React Hook "useContext" cannot be called inside a callback'

In my project, I got rid of classes and I'm just using Hooks. Now that I'm trying to create a HOC, my linter is returning an error for using Hooks inside my curry function. This is the simplified version of my code: const myCurryFunction =…
Felipe Funes
  • 61
  • 1
  • 5
2
votes
1 answer

React: axios.interceptors do not work in hoc

axios.interceptors in hoc withErrorHandler work for clicked method in App.js, but do not work for componentWillMount or componentDidMount in App.js. How can I fix it? App.js class App extends Component { componentDidMount() { …
Yurii Nikytenko
  • 35
  • 6
1
vote
1 answer

React Multiple Higher-Order Components without redux

By the function name I'm sure you can understand the scenario of it just wanting to add some global components. export default withLoading(withSnackbar(GlobalDropZone)); My question was exactly the same as React Multiple Higher-Order Components ,…
HappyKoala
  • 191
  • 1
  • 11
1
vote
0 answers

What are the pros and cons of the HOC pattern vs React Hooks to inject props/dependencies?

Suppose we have a HOC withWidth and a hook useWidth which both injects the current window width as a prop in a component. withWidth: const MyFunctionComponent = withWidth(({width}) => { return width === 'mobile' ? // render mobile version …
Edu Paz
  • 143
  • 1
  • 7
1
vote
0 answers

Props within Higher Order Components in React

I use higher order components (HOC) all the time in React, but I'm a little confused as to the theory behind them. Why do I need to include a prop in an HOC to make it available in child components? Why can't there be a pattern to import a hook…
Gary
  • 909
  • 9
  • 26
1
vote
0 answers

caught exception from jest mockRejectedValue is undefined

I'm trying to write a test. That test looks like this: it("throws expected error when invoke action promise is rejected", async () => { const datadogWarnSpy = jest.spyOn(datadogLogs.logger, "warn"); const invokeActionSpy = jest …
Wynn
  • 173
  • 1
  • 14
1
vote
1 answer

Why is the callback function not working in the HOC component?

I'm passing the state (setActive) to the ButtonsOur component. Further, through the callback, I pass setActive to the HOC, but I get this error "Uncaught TypeError: setActive is not a function". Why it doesn't work, and how i can fix this? In…
Anta
  • 97
  • 8
1
vote
0 answers

Why my Hoc component for PopUp doestWork?

Hoc for popup does not work. Hock has a boolean state and two functions that change it. I pass them to the popup opening buttons and to the popup itself. The state changes through the console, but the popup itself does not open. My HOC…
Anta
  • 97
  • 8
1
2 3 4 5