import React from 'react'
import {
View,
Button,
TextInput,
StyleSheet,
Alert,
ScrollView
} from 'react-native'
import axios from 'axios';
export default class Add extends React.Component {
static navigationOptions = {
title: 'Add',
headerStyle: {
backgroundColor: '#f4511e',
},
//headerTintColor: '#0ff',
headerTitleStyle: {
fontWeight: 'bold',
}
};
constructor() {
super();
this.state = {
firstName: ' ',
middleName: ' ',
lastName: ' ',
email: ' ',
password: ' ',
mobileNumber: ' ',
dob: ' ',
genderType: ' ',
bloodGroup: ' ',
geoName: ' ',
countryName: ' ',
locationName: ' '
}
this.firstName = this.firstName.bind(this);
this.middleName = this.middleName.bind(this);
this.lastName = this.lastName.bind(this);
this.email = this.email.bind(this);
this.password = this.password.bind(this);
this.mobileNumber = this.mobileNumber.bind(this);
this.dob = this.dob.bind(this);
this.genderType = this.genderType.bind(this);
this.bloodGroup = this.bloodGroup.bind(this);
this.onPress = this.register.bind(this);
}
firstName(event) {
console.log(this.state.firstName)
this.setState({ firstName: event.target.value })
}
middleName(event) {
this.setState({ middleName: event.target.value })
}
lastName(event) {
this.setState({ lastName: event.target.value })
}
email(event) {
this.setState({ email: event.target.value })
}
password(event) {
this.setState({ password: event.target.value })
}
mobileNumber(event) {
this.setState({ mobileNumber: event.target.value })
}
dob(event) {
this.setState({ dob: event.target.value })
}
genderType(event) {
this.setState({ genderType: event.target.value })
}
bloodGroup(event) {
this.setState({ bloodGroup: event.target.value })
}
register(event) {
fetch('http://139.59.72.125:1337/apply/create', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
firstName: this.state.firstName,
middleName: this.state.middleName,
lastName: this.state.lastName,
email: this.state.email,
password: this.state.password,
mobileNumber: this.state.mobileNumber,
dob: this.state.dob,
genderType: this.state.genderType,
bloodGroup: this.state.bloodGroup
})
}).then((Response) => Response.json())
console.log(this.state.firstName)
.then((Result) => {
if (Result.Status == 'Success')
alert('SuccessFully Added')
else
alert('Sorrrrrry !!!! Un-authenticated User !!!!!')
})
}
render() {
return (
<ScrollView>
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='FirstName'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.firstName}
/>
<TextInput
style={styles.input}
placeholder='Midlle Name'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.middleName}
/>
<TextInput
style={styles.input}
placeholder='LastName'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.lastName}
/>
<TextInput
style={styles.input}
placeholder='Email'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.email}
/>
<TextInput
style={styles.input}
placeholder='Password'
secureTextEntry={true}
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.password}
/>
<TextInput
style={styles.input}
placeholder='Phone Number'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.mobileNumber}
/>
<TextInput
style={styles.input}
placeholder='Date of Birth'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.dob}
/>
<TextInput
style={styles.input}
placeholder='Gender'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.genderType}
/>
<TextInput
style={styles.input}
placeholder='Blood Group'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.bloodGroup}
/>
<Button
title='Add'
onPress={this.register}
/>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
input: {
width: 300,
height: 40,
backgroundColor: '#42A5F5',
margin: 10,
padding: 8,
color: 'white',
borderRadius: 14,
fontSize: 18,
fontWeight: '500',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
When we click on add button it is showing undefined error. In Api i need to add details using class component, from fields it is not passing into api. Dynamic passing value in json format. using constructor
Undefined is not an object evaluating this.state
It is redirect to home screen
[Mon Nov 02 2020 10:26:00.404] ERROR TypeError: undefined is not an object (evaluating 'this.state.firstName')
[Mon Nov 02 2020 10:26:10.301] ERROR TypeError: undefined is not an object (evaluating 'this.state.firstName')
