multiple-patron-context.js

import React from 'react'

import { api } from 'ducks/user'

const MultiplePatronContext = React.createContext({
  isMultiplePatronEnabled: false,
  error: '',
})

export class MultiplePatronProvider extends React.Component {
  state = { isMultiplePatronEnabled: false }

  async componentDidMount() {
    try {
      const response = await api.fetchMultiplePatronsEnabled().then(res => res.data)
      this.setState({ isMultiplePatronEnabled: response.enabled })
    } catch (ex) {
      this.setState({ error: ex.message })
    }
  }

  render() {
    return (
      <MultiplePatronContext.Provider value={this.state.multiplePatronEnabled}>
        {this.props.children}
      </MultiplePatronContext.Provider>
    )
  }
}

export const MultiplePatron = MultiplePatronContext.Consumer


//
//
// usage
//
//
<MultiplePatronProvider>
  ...
    <MultiplePatron>
      {isMultiplePatronEnabled => (
       .... 
      )}
    </MultiplePatron>
  ...
</MultiplePatronProvider>