Newest 'higher-order-components' Questions - Stack Overflow

Questions tagged [higher-order-components]

The tag has no usage guidance.

0
votes
0answers
17 views

FirebaseContext Returns null value?

Want to use firebase authentication in react app, I have created a firebase class and a context which will provide firebase object to complete app. I have wrapped my firebase component with custom ...
-1
votes
1answer
35 views

Clearing state after render

Consider this HOC I use for fetching data function withData(Component, endpoint) { return class extends React.Component { state = { result: null, loading: false, error: { ...
0
votes
0answers
12 views

React TypeScript Higher Order Component definition

I have a HOC, which will add isLoading and setLoading to the wrapped component, it's implemented similarly to react-navigation withNavigation HOC. But TypeScript complains some type compatibility ...
0
votes
0answers
11 views

Combination of React HOC with fetch and redirect cause memory leaks

I've created HOC which I use to fetch data and check, if user is logged in. I use this HOC with Navbar to display different buttons, depending on wether user is logged in or not. The issue is that if ...
2
votes
2answers
58 views

Higher order component with generic inception types

I have got a generic union type for fetching data called RemoteData for which I tried to create a higher order component: export interface IWithRemote<T> { remote: RemoteData<T>; } ...
-1
votes
1answer
63 views

Am I right about this HOC(Higher Order Component) code?

I have two questions. First of all, I'm going to start by explaining this algorithm.After the loading page has loaded , I implement a 'loading' visual in store, and I take this as a prop via props....
0
votes
1answer
15 views

React adding an element programmatically with a HOC

Is there a way using a High Order Component to add elements programatically to a Component? I was wondering if there was a way using React.createElement to append the component's children? Here is the ...
0
votes
1answer
17 views

How can I access props in a component wrapped with custom HOC?

I created a simple HOC, which uses custom hook to track mouse position. I use the hook in the HOC function, and with it I want to pass that value to the wrapped component. And that's OK, I pass the ...
2
votes
1answer
32 views

Get all child component hrefs using a React higher-order component

My goal is to add a click handler on all anchor elements with an href that links to an external domain. This is my component: import React from 'react'; import LinkWrapper from './LinkWrapper' ...
1
vote
1answer
54 views

React + Material UI - Overriding MuiTheme in component withStyles

I am using Material UI with React. Trying to override the TextField component style which has been setup using a global theme. I have setup a global theme for all TextField components in the app. ...
0
votes
2answers
26 views

How can I hide my navbar on the homepage and make it only visible once the user has logged in?

I'm making a react app, I made a navbar and It renders in all of the components and I only want it visible in one, I made a HOC function but It still doesnt work correctly. Higher Order Components ...
0
votes
0answers
24 views

Using react hooks in a Functional HoC

I am new to react hooks so not sure if there is a better way to implement the below. I have a functional HOC that adds some action controls eg. reply, delete, like etc. to any wrappedComponent. The ...
-1
votes
1answer
75 views

TypeScript with React Lazy getting promise error

I am using react with typescript.I have used a higher order component to check whether the user is authenticated or not. After adding the hoc i am getting the error in routes as below /home/nidhin/...
0
votes
1answer
38 views

React JS Higher-Order-Component not execute function if state is being set outside that function

I can't think about a proper sentence for the question title, so first I would like to apologize if the title is somehow confusing. So I was just finish learning React JS and trying to build an app ...
-2
votes
1answer
29 views

Looking for a more elegant way to write multiple components using similar functions

I have this component that displays data but also needs to save and manipulate state. I have 5 other components that are exactly the same, except for little nuances inside of their functions. I need ...
0
votes
0answers
10 views

how can i create a higher-order function for creating reusable material-ui icon?

I need to create a reusable component for material UI icon. So, that I can only specify the type, color and size and use it multiple components. <CakeIcon color="secondary" fontSize="large"/> ...
0
votes
1answer
57 views

Recompose with react-navigation - how to hoist static navigation header when using branch?

I have the following using which sets the react-navigation header options. The component is enhanced using various HOC components, and then using Recompose to branch the render logic. When rendering ...
3
votes
2answers
42 views

React Higher Order Components: Proper way to add instance methods

I am trying to add instance methods to a wrapped component. I am doing this by extending the wrapped component's prototype: const useAppContext = () => WrappedComponent => { ...
0
votes
0answers
17 views

How can I avoid having to specify props added by a HOC in the component using the HOC

This is my HOC: https://pastebin.com/eiuP3G8s It adds some search functionality to a component. It is working, but I have to import and spread WithSearchProps into the props of my wrapped component. ...
0
votes
0answers
25 views

Recommendations for a React component that prioritizes children and only allows one to render?

Looking to make a type of "manager" parent component that can take an arbitrary number of children that may render as null (no more than a dozen or so max, probably less so scale isn't required), ...
0
votes
0answers
275 views

ReactJS - Formik | How to handle bad server request on Submit Form

I am using React and Formik to handle errors for a form. During testing I found out, that when the server sends a BAD Request,I get a Console Error, saying that: :5000/api/user:1 POST http://...
1
vote
1answer
431 views

Send Variable to withStyles in Material UI?

I have the following: class StyledInput extends React.Component{ styles = (color, theme) => ({ underline: { borderBottom: `2px solid ${color}`, '&:after': { ...
0
votes
3answers
56 views

Sharing content between adjacent components, HOC?

I have a container component which renders two components inside it. Depending on some props in the container, the top component can change, but the lower component will always remain the same. I ...
0
votes
0answers
49 views

WordPress Gutenberg block development - How to create a custom Higher Order Component and collect metabox values as props inside it

I seems to be hard to find a proper example for Gutenberg development. My questions are: Is this possible to write my own customize Higher Order Component in Gutenberg? I have a block with metaboxes....
1
vote
1answer
50 views

How to resolve an error in Typescript about `withStateHandlers`

I tried to make a React sample application using HOC. but since I got an error in Typescript, I couldn't keep making anymore. I got this error message below (34,38): Type '{ timeLeft: number; ...
1
vote
0answers
45 views

Use HOC, React Context and componentDidMount API to get uid form Firebase

I try to use a HigherOrderComponent (HOC) to provide the uid of a Firebase user to a component (Comp). The value is succesfully retrieved but I don't succeed in getting it in the wrapped component (...
0
votes
1answer
56 views

Getting the following error when creating React HOC: type is invalid — expected string or a class/function but got: object

That's the first time I am using Flow in a work environment, I usually prefer TypeScript over Flow a lot. I am having some issue creating a really simple HOC, which is something I did a lot of times ...
1
vote
0answers
23 views

How do I compose HOCs without getting a type-error?

In our application we use i18next (exposing the HOC withNamespaces) and material-ui (exposing the HOC withStyles) and we have to use typescript. Some components need both translations and styling, so ...
0
votes
1answer
26 views

React higher order component to firebase authenticate does not send updated state to the component

I am new to react and I am trying to authenticate with firebase in react. I have created a higher order component to essentially enrich the component with the status of the user and verify if the user ...
0
votes
1answer
108 views

React & TypeScript HOCs - why I get Type '{}' is not assignable to Type P?

I hit the wall while coding along with Learning React with TypeScript book. I surrendered and copy pasted code directly from the book, but compiler is still unhappy My current workaround is to ...
1
vote
0answers
352 views

React + Typescript Higher Order Function “not assignable to type” error

I am trying to write a higher order function for React in typescript that: (1) Requires a certain properties on the component being wrapped (2) Allows for the wrapped components properties to be set ...
1
vote
0answers
59 views

React Native | How access to endCoordinates of Keyboard using Typescript and recompose

So I use recompoose and typescript in my react native app, and I trying to access to endCoordinates for Keyboard the get the Keyboard height. I followed this article and this post but I am not able to ...
1
vote
1answer
160 views

Pass down props as a parameter to another HoC within compose

I am using the recompose library and have a bunch of HoCs building on each other, one of each needs previous props as a parameter. This is what is looks like: export default compose( withSomeHoC(...
0
votes
1answer
132 views

Using withWidth HOC from material UI

I'm using version 3.9.2 of Material UI and I'm trying to use widthWith HOC in a SSR app. With the following code, if I disable Javascript in the debugger options of Chrome Developer Tools, everything ...
0
votes
1answer
90 views

React Higher Order Component expects injected prop when using, causesTypeScript error

I have made an HOC which is providing props for network calls to the passed component - so network call loading indicators, error messages etc can be handled by the HOC. The code works as expected ...
1
vote
1answer
107 views

Default prop types through a higher order component

Passing components through a HOC is causing the defaultProps information to be lost to the typescript compiler. For instance themed.tsx export interface ThemedProps { theme: {}; } type Omit<...
0
votes
2answers
278 views

Typescript Compile Error: Type '{}' is not assignable to type 'T'

I am using React with Typescript to create a higher-order component (HOC), and am having trouble understanding the error being returned by the Typescript compiler. I have a resolution to my problem ...
1
vote
1answer
36 views

Trying to connect an HOC

Im trying to use user roles to determine whether or not to display a component. So im trying to use an HOC to handle that functionality, but im getting an error i dont quite understand. here is the ...
0
votes
2answers
80 views

How to make an hover state HOC without wraping the component inside a <div>?

I'm trying to write a Higher-order Component which provide a hover property to a component. But I can't make it work with any type of component. My HOC function withHover(WrappedComponent) { ...
1
vote
0answers
16 views

Implement Certain timeout session on multiple pages of a website - REACTJS

Suppose there 5 pages to a website. User flow will be 1->2->3->4->5->FINISH. I want to implement is that whenever a user enters page 3 a timer starts and if he doesn't finish a task ...
2
votes
2answers
1k views

Warning: Functions are not valid as a React child HOC

I'm writing an HOC in Reactjs. When I'm going to return class in WithErrorHandler HOC I get a warning in console said "Functions are not valid as a React child. This may happen if you return a ...
1
vote
1answer
47 views

React with TypeScript: how to access HOC methods in new coponent

HI I have an interface for a props and a state: interface IOffersProps { nextStep: () => void; step: number } export default IOffersProps interface IOffersState {} export default ...
1
vote
1answer
44 views

React compose prevent div wrap

I have a simple component in React: const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => { const { imageWidth } = ownProps; const divNode = node.querySelector( '.text' ); ...
0
votes
1answer
371 views

Injecting/passing components as props from HOC to the Wrapped-Component

In my recent React project I have used some HOC's to pass component as props to the wrappedcomponent and I was wondering if there is anything thing wrong with this approach. Below is an example: HOC: ...
0
votes
0answers
36 views

How to reuse HOC Redux component with typescript?

I have a Component that I'd like to use in like 10 apps. But the problem is that I don't want to connect the component in each app. Because they would all basically do the same thing. I was thinking ...
0
votes
3answers
170 views

Refactoring almost identical components, formik react

I have two identical components, and only few differences (one). There are two many repetitive code and boilerplate, but I am unsure how to refactor this so that I only need to supply a config ...
0
votes
0answers
119 views

Writing a “HoC factory function factory” for generic React context consumers

Currently I have a context called ExploreContext that I access by injecting the respective props into a particular component using a HoC factory function which kinda looks as follows: type Omit<T, ...
0
votes
1answer
227 views

HoC for context consumer causing type error with child component

I am having an issue wherein I attempt to write a HoC in order to wrap components that should have access to a particular context via newly injected props. There is a Gist related to a tutorial which ...
2
votes
1answer
1k views

Warning: Unknown event handler property `onHeaderClick`. It will be ignored

I am creating Higher order components for passing some props with another component. But getting the warning for Unknown event handler property. export class TableHeaderRow extends React....
1
vote
1answer
124 views

Are the components returned from higher-order components called closures?

I have a higher-order component FormBuilder like this: const FormBuilder = (WrappedComponent) => { const name = 'bob'; return class HOC extends React.Component { render() { return ( ...