Create a React HOC scaffold

      React components are the most common function you will use. I doubt you will be able to get much done without it. But there are occasions when you want to implement certain functions or modify a component, sort of like middleware. This is where HOC comes in. It stands for Higher Order Component, which basically means that it will take in your React components, implement a certain function you want and output the component to meet your expectations.

// HOC function
export default function Hoc(Component) { 
function ReactComponent() { 
return <Component />
};

return ReactComponent;
};

// Normal react component
import React from "react";

const Component = (arg) => { 
return (
<div>{arg}</div>
);
};

export default Component;

// How to use the HOC function we created
const HOC = Hoc(() => <Component arg={hello world} />); 

// You can now use HOC as JSX component
<HOC />

HOC are not necessary but they are very useful and the sooner you start using them, the better your React experience will be.