/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 vote217 views1 answer
React content loader
Javascript React
0 vote135 views1 answer
React native change image color
Javascript React
0 vote191 views1 answer
React native jest snapshot
Javascript React
12 votes149 views3 answers
React form hook npm
Javascript React
0 vote237 views1 answer
How to add oncklick button react
Javascript React
0 vote198 views1 answer
Box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15); to react native
Javascript React
10 votes204 views4 answers
Attempted import error 'switch' is not exported from 'react-router-dom'. in react js
Javascript React
7 votes203 views4 answers
React native update state array of objects
Javascript React
1 vote221 views1 answer
Has been blocked by cors policy react fetch firebase realtime database
Javascript React
0 vote235 views1 answer
React Readonly fractional rating
Javascript React