/Javascript/React/React higher order components

React higher order components

// This function takes a component...
function withSubscription(WrappedComponent, selectData) {
  // ...and returns another component...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ... that takes care of the subscription...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ... and renders the wrapped component with the fresh data!
      // Notice that we pass through any additional props
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

Similar codes

0 vote90 views1 answer
Store data with props in react js
Javascript React
0 vote153 views2 answers
Veu js vs angular vs react features
Javascript React
0 vote134 views1 answer
Formatt json to create node and child node react
Javascript React
0 vote168 views1 answer
Create-react-app enviroment variables
Javascript React
18 votes163 views3 answers
Add material ui to react
Javascript React
0 vote161 views1 answer
Jest mock react-redux hooks
Javascript React
5 votes170 views3 answers
CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker"
Javascript React
3 votes131 views2 answers
React api call
Javascript React
1 vote137 views3 answers
Sticky footer react
Javascript React
11 votes149 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React