Context Value Undefined In React

Why Context value showing undefined? src/Context.js: import React, { Component } from 'react'; const Context = React.createContext(); export class Provider extends Component {

Solution 1:

You need to wrap your CountryList component with Provider i.e you need to import Provider.

importReact, { Component } from'react';
import { Provider,Consumer } from'../../Context';

classCountryListextendsComponent {
  render() {
    return (
      <Provider><Consumer>
          {value => {
            console.log('val:' + value);
          }}
        </Consumer></Provider>
    );
  }
}
exportdefaultCountryList;

Stackblitz example here : https://stackblitz.com/edit/react-143zwt (I just added for testing. It will give you idea. I do not add this code there.)