React Higher Order Component

example for code reuse

by Rich Costello

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Button extends React.Component {
	render() {
  	return <button 
      className="btn btn-primary"
      onClick={this.props.handleClick}>
        {this.props.label}
      </button>
  }
}

class Link extends React.Component {
	render() {
		return <a onClick={this.props.handleClick} href="#">
		  {this.props.label}
		</a>   
  }
}

class Logo extends React.Component {
	render() {
		return <img onClick={this.props.handleClick} width="200" src="https://logos-download.com/wp-content/uploads/2016/09/React_logo_wordmark.png" href="#"/>  
  }
}


const LoadWebsite = (Component) => {
	class _LoadWebsite extends React.Component {
  	constructor(props) {
    	super(props)
      this.state = {label: 'Run'}
      this.state.handleClick = this.handleClick.bind(this)
    }
    getUrl() {
    	return 'https://richcostello.github.io/am1port/'
    }
    handleClick(event) {
    	var iframe = document.getElementById('frame').src = this.getUrl()
    }
     componentDidMount() {
    	console.log(ReactDOM.findDOMNode(this))
    }
   
    render() {
     console.log(this.state)
     return <Component {...this.state}{...this.props} />
    }
  }
  _LoadWebsite.displayName = 'EnhancedComponent' 
  return _LoadWebsite
}

const EnhancedButton = LoadWebsite(Button)
const EnhancedLink = LoadWebsite(Link)
const EnhancedLogo = LoadWebsite(Logo)
class Content extends React.Component {
	render() {
  	return (
    	<div>
    	  <EnhancedButton />
        <br></br>
        <EnhancedLink />
        <br></br>
        <EnhancedLogo />
        <br></br>
      <iframe id="frame" src="" width="600" height="500"/>
      	</div>
    )
  }
}

ReactDOM.render(
  <Content />,
  document.getElementById('container')
);