By Sarmad S.


2018-07-09 14:46:40 8 Comments

I have a React class called GlobalDataProvider:

import React, { Component } from 'react';

const DataContext = React.createContext();
export default DataContext;

export class DataProvider extends Component {

  state = {
     title: 'Some title'
  }

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

And I am trying to use data in another file "PageSection.js" like this:

import React from 'react';
import DataContext from '../data/GlobalDataProvider';

const PageSection= () =>{

return (
    <section className="page-section">
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.state.title }</h1>
            )}
        </DataContext.Consumer>
    </section>
 );
};

However this does not work for some reason. I get this error message:

TypeError: Cannot read property 'state' of undefined, 
  in PageSection.js line 11 (the line with this code: { context.state.title }). 

What am I doing wrong?

Do I have to import the class DataProvider? or only the Context variable?

2 comments

@Roy.B 2018-07-09 14:59:24

try:

export class DataProvider extends Component {

  state = {
     title: 'Some title'
  }

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






const PageSection= () =>{

return (
  <DataProvider>
    <section className="page-section">
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.title }</h1>
            )}
        </DataContext.Consumer>
    </section>
 </DataProvider>
 );
};

@Sarmad S. 2018-07-09 15:02:16

console logging context gives undefined, so there is something wrong with the import export propabbly, this does not work (undefined.title = undifined)

@Roy.B 2018-07-09 15:04:05

then your path import DataContext from '../data/GlobalDataProvider'; is probably wrong

@Sarmad S. 2018-07-09 15:07:02

I checked, and it is not the case. I am importing the variable called "DataContext", should I import the class called "DataProvider" instead (both in GlobalDataProvider.js)?

@Roy.B 2018-07-09 15:09:57

yes and you need to wrap it around the consumer, ill update my code

@Doug Coburn 2018-07-09 15:09:08

I suspect you need your DataContext.Consumer to be a child element of the DataContext.Provider. Something like this...

import React from 'react';
import DataContext, { DataProvider } from '../data/GlobalDataProvider';

const PageSection= () =>{

return (
    <section className="page-section">
      <DataProvider>
        <DataContext.Consumer>
            {(context) => (
                <h1>{ context.state.title }</h1>
            )}
        </DataContext.Consumer>
      </DataProvider>
    </section>
 );
};

@Sarmad S. 2018-07-09 15:11:28

That does it, Thanks!

Related Questions

Sponsored Content

24 Answered Questions

[SOLVED] Get the current URL with JavaScript?

  • 2009-06-23 19:26:45
  • dougoftheabaci
  • 2843073 View
  • 3027 Score
  • 24 Answer
  • Tags:   javascript url

96 Answered Questions

[SOLVED] How can I remove a specific item from an array?

  • 2011-04-23 22:17:18
  • Walker
  • 6833987 View
  • 8412 Score
  • 96 Answer
  • Tags:   javascript arrays

61 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

39 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

3 Answered Questions

57 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

39 Answered Questions

[SOLVED] How do you get a timestamp in JavaScript?

Sponsored Content