Some changes in function and setState function? - reactjs

Question

I am doing such things in reactjs but when I started learning react-native it is not working can you tell me how to perform such tasks??
import React, {Component} from 'react';
import {Text, View, Form } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage, Button } from 'react-native-elements';
class Header extends Component {
constructor(props){
super(props);
this.state = {
email : '',
password : '',
};
}
inputData = event => {
this.setState({
[event.target.name]:event.target.value
});
}
submitData = event => {
event.preventDefault();
console.log(this.state);
}
render(){
return(
<View>
<Text style= {{fontSize : 40, marginTop : 50, marginLeft : 100, fontWeight : 'bold'}}>
New App!
</Text>
<FormLabel>Email</FormLabel>
<FormInput name='email' type='email' onChange={this.inputData}/>
<FormLabel>Password</FormLabel>
<FormInput name='password' type='password' onChange={this.inputData}/>
<Button title='Submit' onPress={this.submitData} style={{marginTop:20}}/>
</View>
);
}
}
export default Header;
As you can see over here is that when I used onChange the values are not getting assigned.
I know how to use with onChangeText and it's working also, but can you tell me why the above approach is not working and if not then any significant reasons???

Answer 1

You can try this way, use onChangeText instead of onChange
import React, {Component} from 'react';
import {Text, View, Form } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage, Button } from 'react-native-elements';
class Header extends Component {
constructor(props){
super(props);
this.state = {
email : '',
password : '',
};
}
inputData = event => {
this.setState({
[event.target.name]:event.target.value
});
}
inputEmail = text => {
this.setState({
email: text
})
}
inputPassword = text => {
this.setState({
password: text
})
}
submitData = event => {
event.preventDefault();
console.log(this.state);
}
render(){
return(
<View>
<Text style= {{fontSize : 40, marginTop : 50, marginLeft : 100, fontWeight : 'bold'}}>
New App!
</Text>
<FormLabel>Email</FormLabel>
<FormInput value={this.state.email} name='email' type='email' onChangeText={this.inputEmail}/>
<FormLabel>Password</FormLabel>
<FormInput value={this.state.password} name='password' type='password' onChangeText={this.inputPassword}/>
<Button title='Submit' onPress={this.submitData} style={{marginTop:20}}/>
</View>
);
}
}
export default Header;