CODEWITHSUNDEEP
react-native
JackmanLee
JackmanLee

Reputation: 25

React Native get undefined is not an object error

I am new to react native.

When I ran my codes on Android emulator I got this error:

undefined is not an object, evaluating ChangeTextHandler.bind(this).

Please help on this. Thanks.

Here are my codes. Did I miss anything?

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

// type Props = {};
export default class App extends Component {
  constructor(){
    super()
    this.state= {
      value: "default text"
    }
    this.onChangeTextHandler = this.ChangeTextHandler.bind(this)
  }


  onChangeTextHandler(newText){
      this.setState(
        {
          value: newText
        }
      )
      }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text>Username:  </Text>
        <TextInput defaultValue = "username"
          onChangeText={this.onChangeTextHandler} />
        <Text> You are writing {this.state.value}</Text>
        <Text>Password:  </Text>
        <TextInput  />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

By the way I got errors "looks like most of your post is codes, please add more details". But I dont have any more to say.

Upvotes: 2

Views: 368

Answers (2)

Riddhi
Riddhi

Reputation: 777

You can bind function in other 4 ways too. For your extra knowledge as a beginner please refer below link https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56.

And here you can bind like this also :

export default class App extends Component {
  constructor(){
    super()
    this.state= {
      value: "default text"
    };
  }

  onChangeTextHandler = (newText) => {
    this.setState({
       value: newText
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text>Username:  </Text>
        <TextInput defaultValue = "username"
          onChangeText={(text) => this.onChangeTextHandler(text)} />
        <Text> You are writing {this.state.value}</Text>
        <Text>Password:  </Text>
        <TextInput  />
      </View>
    );
  }
}

Upvotes: 1

Akshay I
Akshay I

Reputation: 4185

I thing you try this...

export default class App extends Component {
  constructor(){
    super()
    this.state= {
      value: "default text"
    }
  }


  onChangeTextHandler(newText){
      this.setState(
        {
          value: newText
        }
      )
      }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text>Username:  </Text>
        <TextInput defaultValue = "username"
          onChangeText={(text) => this.onChangeTextHandler(text)} />
        <Text> You are writing {this.state.value}</Text>
        <Text>Password:  </Text>
        <TextInput  />
      </View>
    );
  }
}

Upvotes: 1

Related Questions