React HOC Context Example

react-hoc-context-example.js

import React from 'react';

const DataContext = React.createContext();

class DataProvider extends React.Component {
  state = {
    items: [
      "Thing 1",
      "Thing 2",
      "Thing 3",
    ],
  };

  render() {
    return (
      <DataContext.Provider value={{
        items: this.state.items,
      }}>
        {this.props.children}
      </DataContext.Provider>
    );
  }
}

const withData = (Component) => {
  return (props) => (
    <DataContext.Consumer>
      {context => <Component {...props} data={context} />}
    </DataContext.Consumer>
  );
};

const Main = () => (
  <div>
    <TodoList />
  </div>
);

const TodoList = withData(
  ({ data }) => (
    <ul>
      {data.items.map(item =>
        <li key={item}>{item}</li>
      )}
    </ul>
  )
);

class App extends React.Component {
  render() {
    return (
      <DataProvider>
        <h1>React HOC Context Example</h1>
        <Main />
      </DataProvider>
    );
  }
}

export default App;