Undefined is not an object (_this.state)

Question

I am still quite new to react native and am trying to render a view only if the state is set to true. However, as much as I keep trying I always end up with the following error:

Undefined is not an object (evaluating '_this.state')

The code:

"use strict"
import React, { Component } from 'react'
import * as Animatable from './animations'
import Icon from 'react-native-vector-icons/FontAwesome'
import renderIf from './libs/renderif'
import { Text, TouchableOpacity, View, StyleSheet, Navigator } from 'react-native'
var MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

const Ic = ({ name, style, onPress }) => (
    <TouchableOpacity onPress={onPress}>
        <Icon name={name} style={style} />
    </TouchableOpacity>
)

const Btn = ({label, onPress}) => (
  <TouchableOpacity style={styles.btn} onPress={onPress}>
    <Text style={styles.btnText}>
      {label}
    </Text>
  </TouchableOpacity>
)

const Dashboard = ({ navigator }) => (
    <View style={styles.container}>
        <Text style={styles.text}>
          In Dashboard
        </Text>
        <Btn label="Let's go back" onPress={() => navigator.pop()} />
    </View>
)

const Home = () => (    // this is where I am trying to access the state
    <View>
        <View style={styles.navbarContainer}>
            <View style={styles.navbar}>
                <View style={styles.flexes}>
                    <Ic 
                      name="bars"
                      style={styles.iconLeft}
                      onPress={() => this.setState({isOpen: true})}
                    />
                </View>
                <View style={styles.flexes}>
                    <Text style={styles.navbarTitle}>
                        title
                    </Text>
                </View>
                <View style={styles.rightBtn}>
                    <Ic 
                      name="envelope"
                      style={styles.iconRight}
                      onPress={() => alert("envelope pressed")}
                     />
                </View>
            </View>
        </View>
        {renderIf(this.state.isOpen)(
            <View style={{marginTop: 40}}>
                <Text>hi</Text>
            </View>
        )}
    </View>
)

export default class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            isOpen: false
        }
    }

    renderScene(route, navigator) {
        return(
            <route.component
                navigator={navigator}
            />
        )
    }

    render() {
        return (
            <Navigator 
                renderScene={this.renderScene.bind(this)}
                initialRoute={{
                    component: Home
                }}
            />
        )
    }
}

The renderIf function:

'use strict';
import React, { Component } from 'react';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
  predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;

And the main index.android.js:

import { AppRegistry } from 'react-native'
import App from './app';

AppRegistry.registerComponent('NavRoute', () => App);

I tried to find a relevant question that was answered before but sadly I did not find the one that I need. If this question was answered before, please do point me to that thread and my deepest apologies for the inconvenience.

Thank you in advance!

Answer 1

You are trying to use state in a functional / stateless component. That is not possible. To use state, use the class version of React component. The state must explicitly defined in the constructor to use this.state in render function.

export default class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      someState: ''
    }
  }

  // rest of the code below
  // move Home to a separate file - home.jsx and import it
}