top of page
Writer's pictureJino Shaji

React native- Set State Object with event handling-onChangeText

Updated: Jun 9, 2020




import React, { Component } from ‘react’
import {
AppRegistry,
StyleSheet,
Text,
View,TextInput
} from ‘react-native’
class App extends Component {
state = {
person: 
{ name: ‘Jino Shaji’,
location:‘Kochi’
}
};
locationChangeHandler=(location)=>{
this.setState({
person:{location:location}
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Name:  {this.state.person.name}
</Text>
<Text style={styles.welcome}>
Location:  {this.state.person.location}
</Text>
<TextInput
style={{ marginLeft: 20, borderColor: ‘gray’, borderWidth: 1}}
onChangeText={(name) => this.setState({person:{name:name}})}
value={this.state.person.name}
/>
<TextInput
style={{marginLeft: 20, borderColor: ‘gray’, borderWidth: 1}}
onChangeText={this.locationChangeHandler}
value={this.state.person.location}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
// flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
margin: 10
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
})
AppRegistry.registerComponent(‘App’, () => App)

Output:


2 views0 comments

Recent Posts

See All

Redux-Thunk Small Overview

Introduction Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be...

Comments


bottom of page