Reactjs Nextjs HOC

MyComponent.jsx

import React from 'react'
import { Enhance } from "../components/Enhance";

class MyComponent extends React.Component {
  render() {
    if (!this.props.data) return <div>Waiting...</div>;
    return <div>{this.props.data}</div>;
  }
}

export default Enhance(MyComponent); // Enhanced component

MyStatelessComponent.jsx

import React from 'react'
import { Enhance } from "../components/Enhance";

export default Enhance((props) => {
	console.log(props)
	return (
		<div>{props.data}</div>
	)
})

React_Enhance.jsx

import { Component } from "react";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
	  super();
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};