Created
April 23, 2021 12:21
-
-
Save sabesansathananthan/c1453c2c2f1d0444c807e6f0f1fc8c1b to your computer and use it in GitHub Desktop.
How React Components Are Reused
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class WrappedComponent extends React.Component { | |
| render() { | |
| return <input name="name" />; | |
| } | |
| } | |
| const HOC = (WrappedComponent) => { | |
| return class EnhancedComponent extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { name: "" }; | |
| } | |
| render() { | |
| const newProps = { | |
| value: this.state.name, | |
| onChange: e => this.setState({name: e.target.value}), | |
| } | |
| return <WrappedComponent | |
| {...this.props} | |
| {...newProps} | |
| />; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment