Fetch -React Native.Error:on function

Question

undefined is not a function (evaluating 'this_submitForm()')....*I am getting this error while calling the function.I am new to react native and I have searched Every where But i didn't get any solution.If solution available please add sample code for better understanding.

I am posting my code here:*

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
} = React;

 var SCREEN_WIDTH = require('Dimensions').get('window').width;
 var PageOne = React.createClass({
 onEmailChange(email) {
    let s = this.state;
    s.email = email;
    this.setState(s);
},

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
           <TextInput
                 onChangeText={this.onEmailChange}
                 placeholderTextColor="#a0a0a0"
                 placeholder="email"
                 underlineColorAndroid='transparent'/>
          </View>
        </TouchableOpacity  onPress={this._submitForm()}>
       </View>
    )
  },
});

 var PageTwo = React.createClass({

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

class VerifyMe extends Component {

constructor(props) {
    super(props);

    this.state = {
        email: '',
        password: '',
    }
}

_renderScene(route, navigator) {
    if (route.id === 1) {
        return <PageOne navigator={navigator}/>
    } else if (route.id === 2) {
        return <PageTwo navigator={navigator}/>
    } 
}

_submitForm() { fetch(baseURL+'users/loginUser', { method: 'post', body: JSON.stringify({ config_name: 'default', email: this.state.email,

    })
        .then((response) => response.json())
        .then((responseJson) => {
            if (response.data.responsecode === 1) {
                this.props.navigator.push({id: 2,});
            }
        })
        .catch((error) => {
            console.error(error);
        })
});

} render() { return ( ); } }

Manjeet Singh · Accepted Answer · 2017-03-21 08:01:23Z

1

You are trying to use this._submitFrom in PageOne but you defined it in PageTwo, try to use following code

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
} = React;

 var SCREEN_WIDTH = require('Dimensions').get('window').width;
 var PageOne = React.createClass({
 getInitialState () {
    return {
       email:'', //add your initial state for this class here
  };
},
 onEmailChange(email) {
    //let s = this.state;
    //s.email = email;          // no need of these lines
    this.setState({
      email:email
    });
},
_submitForm() { 
fetch(baseURL+'users/loginUser', { 
method: 'post', body: JSON.stringify({ config_name: 'default', email: this.state.email
})
        .then((response) => response.json())
        .then((responseJson) => {
            if (response.data.responsecode === 1) {
                this.props.navigator.push({id: 2,});
            }
        })
        .catch((error) => {
            console.error(error);
        })
});
}

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
           <TextInput
                 onChangeText={this.onEmailChange}
                 placeholderTextColor="#a0a0a0"
                 placeholder="email"
                 underlineColorAndroid='transparent'/>
          </View>
        </TouchableOpacity  onPress={this._submitForm.bind(this)}> //need to use bind
       </View>
    )
  },
});

 var PageTwo = React.createClass({

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

class VerifyMe extends Component {

constructor(props) {
    super(props);

    this.state = {
        email: '',
        password: '',
    }
}

_renderScene(route, navigator) {
    if (route.id === 1) {
        return <PageOne navigator={navigator}/>
    } else if (route.id === 2) {
        return <PageTwo navigator={navigator}/>
    } 
}

} render() { return ( ); } }

edited Mar 21, 2017 at 8:01

answered Mar 21, 2017 at 7:37

Manjeet Singh

4,5925 gold badges29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

yogeshwar nair Over a year ago

null is not an object(evaluating this.state.email) getting this error while entering the input in Text Input

Manjeet Singh Over a year ago

okay, just little curious to know before going ahead why you preferred the old syntax of React.createclass when you have React.Component available (that doesn't have much added advantages)

Manjeet Singh Over a year ago

can I know on which page/class is your TextInput is PageOne/PageTwo or something else??

yogeshwar nair Over a year ago

pageone...I am pretty sure on this onEmailChange(email) { let s = this.state; s.email = email; this.setState(s); }

Manjeet Singh Over a year ago

try the edited code, I have added some comments for your reference look into those too and toddmotto.com/react-create-class-versus-component

|

Collectives™ on Stack Overflow

Fetch -React Native.Error:on function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related