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
1
vote
1 answer

HOC - Type '{...}' is not assignable to type 'IntrinsicAttributes & PropType'

Hi I'm getting this error : Type '{ children: Element; onClickOutside: () => void; }' is not assignable to type 'IntrinsicAttributes & PopUpWrapperProps'. Property 'children' does not exist on type 'IntrinsicAttributes &…
ne3zy
  • 99
  • 9
1
vote
2 answers

Functional component as initial state value throws children undefined without wrapping in React.memo

Trying to set DefaultLayout component as initial state value. It throws cannot de structure property children of undefined. If I wrap the DefaultLayout component in React.memo it works without any error i.e export default…
Yeshwanth Kumar
  • 81
  • 1
  • 1
  • 8
1
vote
0 answers

Pass data to HOC dynamically which should be out of component where initialization should not happen everytime

const templateName = 'product-edit.panel.general-details'; const Template = TemplateLoader(templateName, true);; const Settings = (): JSX.Element => { const [selectedTemplate, setSelectedTemplate] =…
RTM
  • 39
  • 4
1
vote
0 answers

Type '{}' is missing the following properties from type 'Readonly & InjectedAuthRouterProps<(...args: any[]) => Action>>'

I am trying to integrate redux-auth-wrapper in a typescript based React project. However, I am getting an error when I am trying to use the auth HOC wrapped component anywhere. I thought the auth related props would be injected by the auth HOC but…
Arnab Das
  • 93
  • 1
  • 9
1
vote
0 answers

How to convert HOC to react custom hook

I have below code snippets, just wondering apart from passing a component to withGroupInput, do we have another way to re-use this GroupedInputWithLabel with different components? Thanks export const GroupedInputWithLabel = (props) => { const {…
Yang Wang
  • 580
  • 4
  • 14
1
vote
2 answers

Patterns in React (wrapper)

Good day. I'm building a tree of components and want to use functions of root component in other components of tree. I throw function reference through all tree. Also I use the object if me need get value from the function in not root componet. Can…
Chips
  • 69
  • 5
1
vote
1 answer

Why does componentDidMount fires in a HOC where as componentDidUpdate does not fire?

I am following a reactjs tutorial on higher order components(HOC). I want a HOC to log props when props change. import React, { useState } from 'react'; function logProps(WrappedComponent) { return class extends React.Component { …
chaulap
  • 441
  • 5
  • 14
1
vote
1 answer

TypeError: Object(...) is not a function when doing compose on ReactJS HOC

I have a component where I try to compose (imported from "compose-function" library) as below; export function MyRoute() { let MyGridWithData = compose( withRouter, withTranslation("translations"), withMyApi() )(MyGrid); return…
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
1
vote
1 answer

Uncaught Invariant Violation: A state mutation was detected between dispatches when using arrayMove

I'm trying to build a React/Redux app and I am a beginner. I want to use the React Sortable HOC to have a rearrangeable list but I cannot get the new arrangement to stick. I have a functional component where I get the list of items. The item…
Dorian Olarescu
  • 57
  • 1
  • 8
1
vote
1 answer

How to useRef in Hoc for html element using typescript

This is my code import React, { FC, InputHTMLAttributes, useEffect, useRef } from 'react'; type TElementType = HTMLInputElement | HTMLTextAreaElement; type TElementWithAttributes = InputHTMLAttributes; interface Props { …
Steve Tomlin
  • 3,391
  • 3
  • 31
  • 63
1
vote
1 answer

How can I update every React components using a context without provider?

Given this simple custom hook import React, { createContext, useContext } from 'react'; const context = { __prefs: JSON.parse(localStorage.getItem('localPreferences') || null) || {} , get(key, defaultValue = null) { return…
Yanick Rochon
  • 51,409
  • 25
  • 133
  • 214
1
vote
1 answer

Argument of type '(props: ITableProps) => JSX.Element' is not assignable to parameter of type ... - React HOC

I have a loader HOC HOC: const withLoader =

(WrappedComponent: new () => React.Component, loading: boolean) => { return class WithLoading extends React.Component { render() { return ( …

Rohan Agarwal
  • 2,441
  • 2
  • 18
  • 35
1
vote
0 answers

lazy react and HOC type,Type 'unknown' is not assignable to type 'ComponentType

hey guys,I`m new to typescript and I got a little confused, so I will appreciate if you could help me. as you see under below my home functional component import React from 'react' import ComponentWrapper from "../../Hoc/ComponentWrapper"; const…
RamTn
  • 99
  • 5
1
vote
1 answer

useEffect not setting data to state in functional component

I have functional component wrapped with HOC. Its returns some props after api call. How do I set the state in my child component(functional). const withEditHoc = (WrappedComponent, actioneffects) => { class HOC extends Component { …
aleena reji
  • 109
  • 1
  • 1
  • 7
0
votes
0 answers

CSSTransition HoC for reusable modals which render through a React Portal

I've written a simple useModal hook which allows me to quickly put together a modal using dynamic content. It works great and all but now there's a problem: I've used the excellent CSSTransition library to introduce some subtle animations when…
stratis
  • 7,750
  • 13
  • 53
  • 94
1
2
3 4 5