CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-context
Ebru Gulec
Ebru Gulec

Reputation: 723

Cannot read property 'state' of undefined in react-native context api?

I'm trying to context api in my ract-native app. But i'm getting this error. TypeError: TypeError: Cannot read property 'number' of undefined. What is wrong my code?

appContext.js

import React from 'react';

export const AppContext = React.createContext();

class AppProvider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 10,
        };
    }

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

export default AppProvider;

homeScreen.js

import { AppContext } from './appContext';
<AppContext.Consumer>
    {(context) => context.number}
</AppContext.Consumer>

Upvotes: 0

Views: 2302

Answers (1)

devserkan
devserkan

Reputation: 17608

This is because you are not using your AppProvider component anywhere in your App. Try like this:

const AppContext = React.createContext();

class AppProvider extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      number: 10,
    };
  }

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

class App extends React.Component {
  render() {
    return (
      <AppProvider>
        <AppContext.Consumer>
          {context => context.number}
        </AppContext.Consumer>
      </AppProvider>
    );
  }
}

AppProvider is merely a standard component here. It renders the context's Provider and that one gets some children. So, you should use this AppProvider component somewhere in your app and pass a child with a Consumer.

If you want to keep your context in a separate file it would be like this:

Context and provider component

import React from "react";

export const AppContext = React.createContext();

class AppProvider extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      number: 1745,
    };
  }

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

export default AppProvider;

Main component

import React from "react";
import AppProvider, { AppContext } from "./AppProvider";

class App extends React.Component {
  render() {
    return (
      <AppProvider>
        <AppContext.Consumer>
          {context => context.number}
        </AppContext.Consumer>
      </AppProvider>
    );
  }
}

export default App;

Upvotes: 2

Related Questions