/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 vote197 views1 answer
Donwload data from react js in json file
Javascript React
4 votes282 views1 answer
Error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class.
Javascript React
1 vote217 views1 answer
React native run ios select simulator
Javascript React
-1 vote216 views1 answer
Spotify player react
Javascript React
0 vote196 views1 answer
React native get source maps
Javascript React
2 votes223 views1 answer
React native text right align
Javascript React
0 vote211 views1 answer
Remarkable react js
Javascript React
0 vote186 views1 answer
React sagas state
Javascript React
0 vote224 views1 answer
React-native-error-check-the-render-method-of-app
Javascript React
0 vote209 views1 answer
. What is the use of the return function in the React Native Framework?
Javascript React