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
0
votes
0 answers

React Class Based Higher Order Component Works but not Function based with hooks

I wrote both a functional as well as a class based higher order component function for React. The class based version works, where as the exact translation of it in functional form with hooks does not work. Can someone explain where I went wrong,…
dracarys
  • 1,071
  • 1
  • 15
  • 31
0
votes
0 answers

Changing Nav Bar Contents on Authentication React

I am trying to change the navigation bar contents from Sign In/Register to other things such as Profile once the user logs in. My server sends a 401 when the user is not logged in and I have a HOC (RequireAuth.js) which checks the same for protected…
xyz6675
  • 355
  • 2
  • 6
  • 17
0
votes
2 answers

React Authentication using HOC

The server sends a 401 response if the user is not authenticated and I was trying to check for authentication in the front end using a HOC as seen in Performing Authentication on Routes with react-router-v4. However, I am getting an error saying…
xyz6675
  • 355
  • 2
  • 6
  • 17
0
votes
2 answers

Use react hook in HOC with passed params

I am trying to create HOC and use custom react hook inside. Also in order to use hook I need to pass paras to HOC, but I get error for use hook only in function body. My HOC is: export const withUseAxisTranslate = (props) => { const [t] =…
AlexBerd
  • 1,368
  • 2
  • 18
  • 39
0
votes
2 answers

React HoC - props are not passed to wrapped component

I have two HoC component. First have to serve as some Layout wrapper which will contain some logic for mobile rendering etc. const LayoutWrapper = (Component: React.FC): React.FC => { const Layout = () => { const [layout, set] =…
Martin
  • 455
  • 1
  • 11
  • 34
0
votes
1 answer

How to use react hooks, to check props and render the proper component? (HOC)

Initially, there is no property country in props. So, I need to show loading message if there is no country property in props, but the problem is that it's keep going to render loading element even property country does exist. So country property is…
Doniyor Otamurodov
  • 111
  • 2
  • 9
0
votes
1 answer

export default HOC(SampleComponent) doesnt' work with functional component React

I am unable to use the react feature of HOC with functional component. In below code export default HOC({component: SampleComponent}) doesnt work const SampleComponent: FC = () => { return (
Hello World
); }; export default HOC({…
Prerna shah
  • 321
  • 3
  • 20
0
votes
1 answer

parent to child communication - reactjs with tsx and redux connect

I have started learning react. i'm not sure how to pass values between (parent-child)components when redux-connect is being used. works well when i directly export the class without a connect or compose error Type '{ dataFromParent: string;…
Vignesh Ramamoorthy
  • 35
  • 9
0
votes
1 answer

React HOC type inferring

I would like to create a higher-order function that returns a higher-order component. In the example below I've created a validateSearchParams function, which creates a function which then can be used to wrap a component. However, Typescript (3.7.2)…
Andrew
  • 73
  • 1
  • 6
0
votes
1 answer

React HOC to handel child component API failure

I am using a component from a library which accepts an accessToken as a props. Like and based on the token, it makes an API call and renders an UI based on the result. Now, if the accesstoken has…
Shouvik Mitra
  • 49
  • 8
0
votes
1 answer

How to wrap a function which contains hooks with HoC

As the title suggest I want to be able to wrap a function (which contains) hooks in a HoC. In the example below I want to be able to wrap the JSX from TestView with div element tag where the className="someClassName". However I get the following…
Shivam Sinha
  • 4,924
  • 7
  • 43
  • 65
0
votes
1 answer

Error with HOC in Role Based Authorization in React

I have been trying implement to Role Based Authorization in React as below In authorization.js, it is checked if the logged-in user with his role, is allowed to access the page or not: import React from "react"; const Authorization =…
Nands
  • 379
  • 3
  • 19
0
votes
1 answer

Multiple higher order components in Gutenberg and ESNext

I'm attempting to use the HOCs withInstanceId (to generate a unique identifier to use as an ID in the HTML) and withColors (to use a color picker in the sidebar) in Gutenberg and I'm unsure of the correct ESNext syntax. (And I suppose technically…
jshwlkr
  • 335
  • 6
  • 18
0
votes
1 answer

How to get react component Name inside componentDidCatch in producation build?

I used error boundary inside (componentDidCatch)I want to log which react component is break in producation build. conclusion is get react component Name inside componentDidCatch in producation build. I read many article and below link this is same…
Gaurav Sharma
  • 51
  • 1
  • 11
0
votes
0 answers

Export a property from child components to the parent component using HOC

I am looking to pass a schema from child components and combine the schema and use it at the main App(parent level). Its basically yup schema which is at component level which needs to be merged from components and used in the main…
Devuatprod
  • 147
  • 1
  • 11
1 2 3
4
5