/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

2 votes365 views1 answer
React native open email client expo
Javascript React
0 vote420 views1 answer
How to filter data from mongodb date in reactjs
Javascript React
9 votes339 views4 answers
Firebase' is not defined no-undef react
Javascript React
0 vote365 views1 answer
Clear form inside modal after close reactjs
Javascript React
0 vote434 views1 answer
React onpaste get value
Javascript React
68 votes407 views3 answers
React add inline styles in react
Javascript React
1 vote396 views1 answer
Deploy react to aws
Javascript React
0 vote331 views2 answers
Install react webpack
Javascript React
0 vote427 views1 answer
Start withnreact
Javascript React
1 vote449 views1 answer
Module not found: Can't resolve 'C:\Users\{user}\Documents\React apps\{app-name}\node_modules\react-scripts\node_modules\babel-loader\lib\index.js'
Javascript React