This basically happens when you pass a prop with a name starting with on, regardless of its case. React assumes and tries to bind it with javascript events like onClick, onKeypress, etc
For all practical reasons, decorators and HOC (Higher-Order-Component aka Wrapper) do the same thing. One major difference is that, once you add a decorator, the property/class can only be used in it’s decorated form. HOC pattern leaves higher order as well as the lower order components available for use. For further reading on decorators -> … Read more
I agree with siraj, strictly speaking the example in the accepted answer is not a true HOC. The distinguishing feature of a HOC is that it returns a component, whereas the PrivateRoute component in the accepted answer is a component itself. So while it accomplishes what it set out to do just fine, I don’t … Read more
I’ll post your actual code for context: class Application extends React.Component { render() { return ( <div> {/* Clicking this component only logs the parents render function */} <DynamicParent> <Child /> </DynamicParent> {/* Clicking this component logs both the parents and child render functions */} <StaticParent /> </div> ); } } class DynamicParent extends React.Component … Read more
You can use compose from redux or recompose. For example: Redux import { compose } from ‘redux’ export default compose( withResource, withSocket, withNotifications )(TextComponent) Recompose import { compose } from ‘recompose’ export default compose( withResource, withSocket, withNotifications )(TextComponent)
Update for TypeScript 3.5: The Omit<Type, Keys> utility type is now available. Please see Mathias’ answer for an example usage. Old Answer: Since TypeScript 2.8 and the introduction of Exclude, It’s now possible to write this as follows: type Without<T, K> = { [L in Exclude<keyof T, K>]: T[L] }; Or alternatively, and more concisely, … Read more
I agree with siraj, strictly speaking the example in the accepted answer is not a true HOC. The distinguishing feature of a HOC is that it returns a component, whereas the PrivateRoute component in the accepted answer is a component itself. So while it accomplishes what it set out to do just fine, I don’t … Read more
You are using it as a regular component, but it’s actually a function that returns a component. Try doing something like this: const NewComponent = NewHOC(Movie) And you will use it like this: <NewComponent someProp=”someValue” /> Here is a running example: const NewHOC = (PassedComponent) => { return class extends React.Component { render() { return … Read more