Questions tagged [higher-order-components]
489 questions
152
votes
14 answers
Functions are not valid as a React child. This may happen if you return a Component instead of from render
I have written a Higher Order Component:
import React from 'react';
const NewHOC = (PassedComponent) => {
return class extends React.Component {
render(){
return (
learner
- 4,614
- 7
- 54
- 98
85
votes
6 answers
How can I change this class base higher order component into a functional component?
I have already created a HOC in my react app following this, and its working fine. However i was wondering if there is a way to create a HOC as functional component(With or without state)??? since the given example is a class based component.
Tried…
Mohammed Amir Ansari
- 2,311
- 2
- 12
- 26
60
votes
7 answers
TypeScript: remove key from type/subtraction type
I want to define a generic type ExcludeCart that is essentially T but with a given key (in my case, cart) removed. So, for instance, ExcludeCart<{foo: number, bar: string, cart: number}> would be {foo: number, bar: string}. Is there a way to do…
Daisy Leigh Brenecki
- 7,571
- 6
- 28
- 43
44
votes
3 answers
Exporting React component with multiple HOC wrappers?
I have a React component that displays styled text, and I want to have it load a network resource, listen for WebSocket input, and display notifications. In order to do this, I write Higher Order Component wrapper functions for each of these:…
superhawk610
- 2,457
- 2
- 18
- 27
43
votes
4 answers
React: Do children always rerender when the parent component rerenders?
It is to my knowledge that if a parent component rerenders, then all its children will rerender UNLESS they implement shouldComponentUpdate(). I made an example where this doesn't seem to be the true.
I have 3 components:
Gabriel West
- 931
- 2
- 12
- 23
37
votes
3 answers
React js - What is the difference betwen HOC and decorator
Can someone explain what is the difference between these two?
I mean except the syntactic difference, do both of these techniques are used to achieve the same thing (which is to reuse component logic)?
itay312
- 1,518
- 4
- 24
- 36
34
votes
4 answers
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.PureComponent{
render() {
const customCell =…
Dheeraj kumar Rao
- 8,132
- 3
- 22
- 24
29
votes
2 answers
React HOC and TypeScript 3.2
As TypeScript improve its JSX type-checking in v3.2, we have a problem to correctly type our HOCs now.
Can someone fix types in the following HOC for TypeScript 3.2?
import { ComponentType } from 'react';
type Props = { custom: string };
type…
Deftomat
- 629
- 6
- 15
20
votes
5 answers
Writing a React higher-order component with TypeScript
I'm writing a React higher-order component (HOC) with TypeScript. The HOC should accept one more prop than the wrapped component, so I wrote this:
type HocProps {
// Contains the prop my HOC needs
thingy: number
}
type Component
=…
mthmulders
- 9,483
- 4
- 37
- 54
19
votes
5 answers
Typescript with React - use HOC on a generic component class
I have a generic React component, say like this one:
class Foo extends React.Component, FooState> {
constructor(props: FooProps) {
super(props);
render() {
return
The result is…
Joald
- 1,114
- 10
- 32
18
votes
1 answer
Export higher order components without 'export default'
I am using react-click-outside to hide dropdown menus if the user clicks outside the menu. Normally, I would export the component like so:
export default enhanceWithClickOutside(Dropdown);
However, in this case, I want to export the component…
davidhu
- 9,523
- 6
- 32
- 53
17
votes
1 answer
How to fetch data in HOC from server in Next.js?
I created new app with Next.js 9.3.1.
In old app with SSR, I can use getInitialProps function in HOC components (not in the page), so I can fetch data from server in the HOC component and from page. Like this…
Duy Hưng Androgyne Tenor
- 381
- 3
- 12
13
votes
3 answers
How to pass in an instance variable from a React component to its HOC?
I typically use component composition to reuse logic the React way. For example, here is a simplified version on how I would add interaction logic to a component. In this case I would make CanvasElement selectable:
CanvasElement.js
import React, {…
Tom
- 8,536
- 31
- 133
- 232
12
votes
2 answers
How do I set PropTypes for Higher Order Functional Component?
I'm using airbnb configuration for eslint and it's giving me this warning:
[eslint] 'isLoading' is missing in props validation (react/prop-types)
Is there a way to set PropTypes for isLoading?
const withLoading = Component => ({ isLoading, ...rest…
Bernard Leech
- 756
- 7
- 14
11
votes
1 answer
Render Props vs HOC?
I'm trying to learn React from scratch and having a deep knowledge of concepts !
Today I was searching about HOC, Render Props and the differences between the two. I've checked render times for both. I wrote a console.log('rendered') into render to…
Mohammad
- 183
- 1
- 10