This is an example when we can't access this.context as the Context component has been upgraded to use the new API while the Legacy component is relying on the old one.

Problem.js

import React, { Component, createContext } from 'react';
import PropTypes from 'prop-types';

const ExampleContext = createContext({ api: 'lorem ipsum' });

/*
 * This is an example when we can't access this.context as the Context component
 * has been upgraded to use the new API while the Legacy component is relying on the old one.
 */
class Legacy extends Component {
  render() {
    const { name } = this.props;
    const { api } = this.context;
    return (
      <div>
        <h1>Hello, {name}</h1>
        <p>
          This example is using{' '}
          <span style={{ fontStyle: 'italic', color: 'green' }}>{api}</span>
        </p>
      </div>
    );
  }
}

Legacy.propTypes = {
  name: PropTypes.string.isRequired
};

Legacy.contextTypes = {
  api: PropTypes.string
};

const Context = () => (
  <ExampleContext.Provider
    value={{ api: 'new api that will be supported in future...' }}>
    <Legacy name='John Galt' />
  </ExampleContext.Provider>
);

export default Context;