Questions tagged [higher-order-components]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
1 vote
0 answers
41 views

React issue with retaining error message when switching between components

I have a React app with multiple containers/section components which have the Field component rendered inside them. These sections get displayed on screen based on the click of the corresponding tab/...
1 vote
1 answer
28 views

How to inject prop types into component that is wrapped by hoc

I have a HOC like this import React, {useEffect, useMemo, useState} from 'react' interface WindowSize { width: number, height: number } export function WithWindowSize <T>(Component: ...
  • 10.2k
0 votes
0 answers
8 views

Problem with Unauthenticated Users Briefly Accessing Pages Intended Only for Logged-in Users

I am creating a React project. There are users who use the website, and there is a page that can only be accessed by logged-in users. I am using a Higher Order Component (HOC) to check the user's ...
1 vote
0 answers
8 views

Definig page component only by HOC in NextJS

I have nextjs (react) website I use (on every "page") same template - there is Detail and List component. I have definition of every page as XML (not nextjs thing but my implementation). ...
0 votes
1 answer
109 views

How to Move Next-Redux-Wrapper Store Provider to Layout Component?

Can you please help me move the next-redux-wrapper store provider into a layout component? My current codes follows the next-redux-wrapper office docs and it works fine, but I would like to move the ...
0 votes
1 answer
39 views

Why is the keyword 'default' necessary when exporting a component withStyles

When I implement a simple React component with Mui's withStyles HOC, I have to use the keyword "default" when exporting the component. Why can't I use the HOC in the return statement within ...
  • 1
0 votes
3 answers
92 views

How to type a component prop to a higher order component when you don't have access to the HOC?

I'm trying to pass some custom components to the Tooltip, Legend, XAxis, and YAxis components from the recharts library. My issue is when I pass the component like type Props = { x: number; y: ...
  • 3,592
0 votes
0 answers
44 views

Do I need to forwardRef for each higher-order component in a chain?

I have an higher-order-component pattern that looks like this /** * This is a simple HoC that is a noop that supports ref forwarding. The ref fowarding logic is added * as [refs are not passed ...
0 votes
2 answers
156 views

Passing both props.children and a component as prop in React/Nextjs

User.tsx is a kind of navigation bar that passes all children components through via {props.children}. I also want to pass a breadcrumb component through to it as well but I'm getting an error that ...
  • 35
0 votes
0 answers
44 views

Reducer state update causing a router wrapped in HOC to rerender in a loop

I found that the issue is stemming from a Higher Order Component that wraps around a react-router-dom hook. This Higher Order Component is imported from @auth0/auth0-react and is a requirement in our ...
  • 999
0 votes
0 answers
46 views

Why can't a Higher Order Component (HOC) directly return it's component argument?

I'm learning about Higher Order Components in React and I encountered some code that is very confusing to me. function HOCFunction(Component){ function handleComponent(){ return (<...
0 votes
1 answer
33 views

Higer Order Component Return Value

I've a higher order component which accepts another component as a parameter and returns the modified component. I'm new to react and I'm confused regarding the return statement in the code. import ...
0 votes
1 answer
160 views

Property 'item' does not exist on type 'P' - prop not available to use in higher order component despite it being in props

I'm fairly new to typescript and I'm trying to wrap my head around implementing HoCs with React in this context. The example here is I'm trying to wrap a component with an HoC that will be checking ...
0 votes
0 answers
49 views

how to implement HOC as hooks with states

I want to make a HOC that returns a functional component instead of returning a class-based component (Because I want to update ContextProvider). Is it really possible to do it? The problem with the ...
  • 11
0 votes
0 answers
55 views

I can't pass event's prop to HOC in React

import ParentComponent from "../folder" <ParentComponent dataComponent={() => ( <ExampleComponent {...{prop1, prop2, prop3 }} /> )} /> const ExampleComponent = ({ ...
2 votes
0 answers
58 views

Is it possible to create a component property from within a useEffect or Lifecycle method?

For example I could have a component class HomeDefault extends PureComponent { ... } and I could add a property after the instance like so before the export HomeDefault.someProperty = {test: '...
0 votes
1 answer
106 views

useCallback for function that incorporates batched redux actions (from HOC). What shall i put in the dependancy array?

I have this component import React from 'react'; import { batch } from 'react-redux'; const ContextMenu = ({ menuData, isOpen, changeIsMenuOpen, changeAssetType, }) =&...
  • 25
0 votes
0 answers
20 views

Error "Unexpected character '�'. (1:0)" when creact a higher order component in react

I'm beginner in react.js. I'm tring to create my own higher order component. But I have a problem. enter image description here my code: withState.jsx: import React from "react"; export ...
0 votes
0 answers
29 views

Extending props across multiple React HOCs

I'm a little new to Typescript and confused on how to do this. I have a React component with props which looks like: type ComponentProps = { prop1: any, prop2: any } & React.HTMLAttributes&...
  • 133
1 vote
1 answer
58 views

How does internal method get the props in react-router

I am new to react and javascript. I have been learning react and react router and a tutorial i was following was using withRouter. Anyway, I found some code how to reimplement withRouter as it is no ...
0 votes
0 answers
37 views

How to use HOC to reuse logic component that modifies the behavior of another components

I'm trying to use HOC to apply the logic in several other components of the application, without repeating the code snippet, avoiding boilerplate. The idea is to make the HOC receive AppBars ...
0 votes
2 answers
255 views

Next.js | HOC from REST API with Typescript not being read when wrapping a child component to access it's data

I have this HOC line of code from withUser.tsx. When a user is authenticated, the authenticated pages will then be wrapped by it so that the specified user-role will be the one to only have access to ...
0 votes
1 answer
142 views

Is it possible to render a component passed in as a Prop to a Higher Order Component?

I am working on increasing my knowledge of Higher Order Components. I am wondering if it is possible to render a "component," which is passed in as a prop to a higher order component "...
  • 351
1 vote
2 answers
258 views

How can I preserve generics on a React higher-order component?

Let's say I want to use the React higher-order component pattern to transform a subset of my props before they hit my component: type UpstreamProps<X> = { foo?: number bar?: string ...
  • 2,287
1 vote
1 answer
189 views

Rendering components based on multiple conditions in Reactjs

I need to improve the rendering logic so as avoid confusing multiple ternary operators. What could be the best way to do this. I was looking for a way to use the HOC pattern for conditional render ...
2 votes
2 answers
40 views

How to make a React HOC type-safe yet still pass anything as an extra prop?

Often times in React we have an HOC where we know there are certain required props. However, we also want the consumer of the HOC to be able to pass in any additional props they wish. This is pretty ...
  • 4,411
2 votes
2 answers
498 views

Use React HOC component inside another component JSX block with TypeScript

I have a Higher Order React component (HOC) which I'm trying to use inside another functional component, wrapping its children: // HOC const withSuperpower = <P extends object>(Component: React....
0 votes
0 answers
140 views

How to pass data to wrapped component in an HOC?

I am working on a react web application that needs to fetch data from a database. I am using fetch API for this purpose. I have developed a Higher Order Component to fetch the data based on this ...
2 votes
1 answer
258 views

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) => ( <WrappedComponent {...props} data-test-id="this-is-a-...
  • 3,139
1 vote
2 answers
416 views

Higher Order Component Types Issue

I am trying the following code. But the typescript error won't go away. Also, not sure whats the error even means. type CounterProps = { counter: number } const WithCounter = <T extends ...
  • 346
2 votes
1 answer
2k views

Property X does not exist on type 'GetServerSidePropsContext<ParsedUrlQuery, PreviewData>' [duplicate]

I have the following: type Session = { bearer: string, firstName: string, lastName: string, etc... }; interface ServerContext extends GetServerSidePropsContext { session: Session, }; ...
0 votes
1 answer
34 views

Convert duplicative React code into a Higher Order Component w/o duplication?

I've got some React code that is rendering content. Right now the code contains duplication, because the code should render one way if it contains call to action buttons, and another way if there are ...
  • 1,153
0 votes
1 answer
102 views

Count of Component in the page conceptual recursive problem

I have this conceptual problem and I have a really simple and minimal codesandbox for it: I want to keep a count of the components that are rendered in my page (per component). These are my components....
  • 167
1 vote
1 answer
135 views

Higher Order Components - React.JS

Trying to pass initial value 10 to the Higher Order Components. import HOC from './HighOrderComponent' class ClickHandler extends Component{ state= {val : 10} increment = () => { this....
1 vote
0 answers
469 views

How to type framer-motion props with Higher Order Component?

im building a HOC with framer-motion but I have no idea how to type the props later because framer-motion does not export their types. Should I write them myself? Or how to create the HOC properly for ...
  • 35
2 votes
1 answer
973 views

How to write a generic type that includes all props from one generic type that are not in another?

I'm trying to write a generic HOC that takes a component with props TProps and a type TEntry defining an object structure. I want the HOC to return a component which will call a hook to get an object ...
  • 14.9k
0 votes
1 answer
157 views

React HOC returns before async function can run

I'm trying to implement a protected route HOC in React, but I'm having some trouble with an asynchronous call. const ProtectedRoute = ({ Component, acceptedRoles }: ProtectedRouteProps) => { ...
1 vote
0 answers
26 views

HOC's handler function bypassed in Jest

Can anyone help me understand why the handler function in the HOC does not get called when the blur event is simulated in this jest test? //MyInput.js export const MyInput = (props) => ( <div&...
1 vote
1 answer
965 views

Hoc React Hook "useEffect" cannot be called inside a callback

I am trying to use an HOC component in React with a functional component, but when using hooks I keep getting the error React Hook "useEffect" cannot be called inside a callback. What am I ...
3 votes
0 answers
301 views

Is there a way to pass data to Formik's HOC (Higher Order Component) withFormik() in React?

I have semi-legacy code. There's some Formik components that are being wrapped with withFormik(). The primary thing is, the variable/data is not part of the initial props of the wrapped component. A ...
0 votes
2 answers
422 views

Typescript for HOC with required props

I have a component MyComponent that takes in some props and one of them is optional: type Props = { a: string; b: number; c?: string; } I wrote a higher-order component that adds some ...
  • 7,723
0 votes
0 answers
870 views

TypeError: Cannot read properties of undefined (reading 'up') when using withStyle HOC MUI 5

Recently migrated my code from MUI v4 to v5, Jest not able to find 'theme' in mystyle.js file, getting this error while running test cases, please find the code snippit below. NOTE: My parent ...
0 votes
1 answer
940 views

How to create HOC to wrap useContext provider in React?

I want to reuse a context provider in different parts of my app using HOC ("higher order components"), but my state does not get updated. This is the wrapper of the provider. import React, { ...
1 vote
1 answer
124 views

vue passing props to sub component will generate html attributes to wrapper root

So I have this component PageWrapper that has a title props. <div id="page-wrapper"> <h1>{{title}}</h1> <slot /> </div> And I have a wrapper component that ...
2 votes
1 answer
1k views

Per-page layout for pages wrapped with HOC using TypeScript

I want to apply layout to a page like the below link: layouts#per-page-layouts But my page has a difference, it's wrapped with a HOC, so I applied getLayout to the higher order component itself like ...
0 votes
1 answer
38 views

React: Include new prop to the Child Component in Higher Order Component

This is the Higher-Order Component class token is the prop which I want to include import React from "react"; export function requireAuthentication(Component) { return ...
  • 2,352
1 vote
1 answer
564 views

Factoring material UI popover into a higher order component and keep the popover state in the `hoc`

I am following the react material ui doc here: https://mui.com/components/popover/, and I'm attempting to factor all the popover view and state logic into a higher order component. The one from the ...
  • 4,753
0 votes
2 answers
510 views

React HOC functional component: How to make any children have Parent's state and logic

I am trying to create a React function Hover component (link to a sandbox) which will give any of its {children} hover behaviors i.e. its internal hooks and methods: function WithHover({ children }) {...
0 votes
1 answer
28 views

Is there any way to create a HOC that uses methods from the WrappedComponent?

I wanted to create an auto-refresh-HOC that looks more or less like this: export function withAutoRefresh(WrappedComponent) { return class extends React.Component<any, any> { constructor(p:...
  • 311
4 votes
2 answers
8k views

Next.js: How to prevent flash of the Unauthorized route/page prior to redirect when implementing a private route?

Essentially I created a HOC for two pages in my Next.js app (i.e. profile and dashboard) two prevent users from accessing them if they're not authorized. Example: pages/profile.js import withAuth from ...

1
2 3 4 5
10