0

I am with undefined is not an object (evaluating 'this.context.state') error at my React Native application using Expo.

context/index.js

import React, { Component } from "react";

const MyContext = React.createContext();

class MyProvider extends Component {
    state = {
        stage: 1,
        players:[],
        result:''
    }

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

            </>
        )
    }
}

export {
    MyProvider, MyContext
}

App.js file:

import { StatusBar } from 'expo-status-bar';
import { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { MyContext } from './src/context';
import { MainStage } from './src/components/main_stage'
import { UserStage } from './src/components/user_stage'
import { MyProvider } from './src/context';

class App extends Component {
  static contextType = MyContext;

  render() {
    return (
      <MyProvider>
        <ScrollView>
          <View style={styles.container}>
            {
              this.context.state.stage === 1 ? 
                <MainStage />
                :
                <UserStage />
            }
          </View>
        </ScrollView>
      </MyProvider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App

In this App.js i just want to show a different view if the stage value at state object is 1 or 2.

main_stage.js just in case:

import { Text, View } from 'react-native';

const MainStage = () => {
    return (
        <View>
            <Text>This is the main stage.</Text>
        </View>
    );
}

export default MainStage;

user_stage.js is exactly equal, the difference is just the content at <Text>.

Hope you guys can help me!

I try this and this solution without success at all.

0 Answers0