Fetch -React Native.Error:on function - react-native

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 (
);
}
}

Answer 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 ( ); } }