This week I found myself in need of a way to pass data and functions as props to a component. Due to the constraints of the library I was using, I couldn’t do this in the following conventional manner:
In order to pass
awesomeName to a component in the library I was using, I would need to use a pattern in React called High Order Components (HOCs).
High Order Components (HOC)
A HOC is a React Component that wraps another React Component
Not so scary and extremely useful for what I needed to do.
Passing Props via HOCs
Here’s how we create our HOC:
Here’s how we could use it:
This example is arbitrary, but if you ever find yourself in a situation where you need to pass props to a Component and you can’t do it in the traditional manner, the above pattern should help.