React and Higher-Order Components or HOC

In shortly these are reusable component which can be used for many purposes.

I will give you small example how can you use high-order component.

Let assume that you have some jsx code in some react component:

You will notice that jsx code is invalid, because jsx must have only one parent element. In that case our jsx code should looks like example below:

As you can see we added div element as parent element and now jsx is valid. The same thing we can do with HOC or high order react component but without div element. So let create our first hoc component.

You can see that we created stateless functional react component. Our component accept props and props contains children – jsx elements.

Finally our component which uses hoc component is below. You can notice that we didn’t have to add ‘div’ parent element because we have high order component.

You can see that we imported hoc component and in render method we implemented this component. This is very simple example but you can use react hoc component for different purposes.

 

 

You may also like...

Leave a Reply