Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.