In this video we are going to learn about Higher Order Components.
A higher-order component (HOC) is an advanced element for reusing logic in React components.
Components take one or more components as arguments, and return a new upgraded component.
Alright, lets create Higher order component.
So switch to the project and here just create a new folder inside the component.
Let say folder name is HOC Inside the HOC folder just create a new component.
Lets component name is Coloured.js.
Now open Coloured.js component and here just write.

import React from 'react'

const Coloured = (WrappedComponent) => {
<div className=\"text-success\">
<WrappedComponent {...props} />

export default Coloured;

Now use this Higher Order Component with and existing component.
So just open User.js component.
Here I am just going to use This Higher order component.
So first of all import the higher order component so write the code as following.

import React, { Component } from 'react'
import Colourd from '. /HOC/Coloured';

class User extends Component {
state = {
let name =;

render() {
return (

export default Colourd(User);

Alright now save the file and lets check.
So in browser go to the url /user/Jennifer.
You can see here the component text color.
If I change the color class here it will apply on this user component.
So in this way you can use Higher order component in react js.