Skip to content

Instantly share code, notes, and snippets.

@brigand
Forked from sebmarkbage/Enhance.js
Last active May 10, 2020 01:56
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save brigand/1c476f365a503d5a1e2d to your computer and use it in GitHub Desktop.
Save brigand/1c476f365a503d5a1e2d to your computer and use it in GitHub Desktop.
import { Component } from "react";
export var Enhance = ComposedComponent => class extends Component {
static displayName = "Enhanced"
constructor() {
super();
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
return <ComposedComponent {...this.props} data={this.state.data} />;
}
};
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!this.data) return <div>Waiting...</div>;
return <div>{this.data}</div>;
}
}
export default Enhance(MyComponent); // Enhanced component
@bstro
Copy link

bstro commented Apr 5, 2015

Is this possible through createClass as opposed to ES6 classes?

@gaearon
Copy link

gaearon commented Apr 21, 2015

Yes. It's just a pattern, not a feature.

@zemirco
Copy link

zemirco commented May 6, 2015

I cannot get HigherOrderComponent.js to work. Shouldn't it be this.props.data instead this.data inside MyComponent? Because that actually works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment