Questions tagged [higher-order-components]
The higher-order-components tag has no usage guidance.
482
questions
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: ...
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 ...
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: ...
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 ...
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 ...
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 ...
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,
}) =&...
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&...
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 "...
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
...
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 ...
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-...
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 ...
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 ...
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....
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 ...
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 ...
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 ...
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 ...
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 ...
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:...
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 ...