CODEWITHSUNDEEP
reactjsreact-native
Darron Brown
Darron Brown

Reputation: 51

(React Native) Null is not an object

This is the portion of the code React Native is having trouble rendering: 

You input {this.state.zip}.

Im a beginner and I was following a tutorial in "Learning React Native" yet he code in the book is not working. 

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Image,
  View
} from 'react-native';

class WeatherProject extends Component {
  // If you want to have a default zip code, you could add one here
  getInitialState() {
    return ({
      zip: ''
    });
  }
  // We'll pass this callback to the <TextInput>
  _handleTextChange(event) {
    // log statements are viewable in Xcode,
    // or the Chrome debug tools
    console.log(event.nativeEvent.text);

    this.setState({
      zip: event.nativeEvent.text
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}/>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    borderWidth: 2,
    height: 40
  }
});

AppRegistry.registerComponent('WeatherProject', () => WeatherProject);
[enter image description here][1]

Upvotes: 1

Views: 24024

Answers (2)

Bipin Bhandari
Bipin Bhandari

Reputation: 2692

In ES6 Classes (one where you are extending Component rather than using createClass), initial states are set with this.state = {zip: ''} in constructor.

So it would-be 

class WeatherProject extends Component {
  constructor(props){
    super(props);
    this.state = {
      zip: ""
    }
  }
}

Upvotes: 5

vijayst
vijayst

Reputation: 21826

getInitialState is typically used with React.createClass. For defining a component as class, the following code should be in constructor:

getInitialState() {
    return ({
      zip: ''
    });
  }

constructor:

constructor() {
  super();
  this.state = {
    zip: ''
  }
}

Upvotes: 2

Related Questions