Context value undefined in React

Question

Why Context value showing undefined?

src/Context.js:

import React, { Component } from 'react';

const Context = React.createContext();

export class Provider extends Component {
  state = { a: 1, b: 2 };
  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}
export const Consumer = Context.Consumer;

src/country/CountryList.js:

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

class CountryList extends Component {
  render() {
    return (
      <Consumer>
        {value => {
          console.log('val:' + value);
        }}
      </Consumer>
    );
  }
}
export default CountryList;

Trying to pass context value in CountryList but it's showing undefined, can't figure out why. Thanks in Advance

Shubham Verma · Accepted Answer · 2019-05-19 19:10:35Z

2

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

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

class CountryList extends Component {
  render() {
    return (
      <Provider>
        <Consumer>
          {value => {
            console.log('val:' + value);
          }}
        </Consumer>
     </Provider>
    );
  }
}
export default CountryList;

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.)

edited May 19, 2019 at 19:10

answered May 19, 2019 at 19:00

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LogicalAnt Over a year ago

Thanks a lot, it's working. You may attach any documentation reference so its more helpful for others.

Shubham Verma Over a year ago

I added stackblitz url just for your reference. You can check there. Your console log is working fine.

Collectives™ on Stack Overflow

Context value undefined in React

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related