Create a login form with TextInput in child component - react-native

Question

I am new to React Native and I am trying to implement a simple Login form.
I tried the following first, which works:
import React, { Component } from 'react';
import {
View,
Text,
TextInput,
StyleSheet,
} from 'react-native';
import TitledInput from './login-form';
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.state = { email: '', password: ''};
}
render() {
return (
<View style={styles.container}>
<TextInput
label='Email Adress'
placeholder='you#domain.com'
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Then I wanted to split the input in another independent component called TitledInput and tried this (which is not working):
LoginForm
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import TitledInput from './login-form';
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.state = { email: '', password: ''};
}
render() {
return (
<View style={styles.container}>
<TitledInput
label='Email Adress'
placeholder='you#domain.com'
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</View>
);
}
}
TitledInput
import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default class TitledInput extends Component {
const { inputStyle, labelStyle, containerStyle } = styles;
render() {
return (
<View style={container}>
<Text style={label}>{props.label.toUpperCase()}</Text>
<TextInput
autoCorrect={false}
placeholder={props.placeholder}
secureTextEntry={props.secureTextEntry}
value={props.value}
onChangeText={props.onChangeText}
style={input}
/>
</View>
);
}
}
I get a 'maximum call stack exceeded' error.
I could read on the internet that this error can occur when calling setState in a re-render function... but I don't know how to handle this case where I want my login form to know the value a its input child component.
I want to know it because I will use it when clicking the submit button or is it the whole purpose of the state?

Answer 1

while you are changing email input value in TiledInput email value will propagate to LoginForm. In LoginForm because of state "email" change the login form will rerender. In this case you have to use ComponentWillReceiveProps inorder to get the new email value.
Instead of this approach you can have another state value inside TitledInput to keep email value.
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import TitledInput from './login-form';
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.state = { email: '', password: ''};
}
render() {
return (
<View style={styles.container}>
<TitledInput
label='Email Adress'
placeholder='you#domain.com'
onChangeText={(email) => this.setState({email})}
/>
</View>
);
}
}
// TitledInput
import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default class TitledInput extends Component {
constructor(props) {
super(props);
this.state = { text: ''};
}
const { inputStyle, labelStyle, containerStyle } = styles;
handleTextChange(value){
this.setState({text:value});
this.props.onChangeText(value);
}
render() {
return (
<View style={container}>
<Text style={label}>{props.label.toUpperCase()}</Text>
<TextInput
autoCorrect={false}
placeholder={props.placeholder}
secureTextEntry={props.secureTextEntry}
value={this.state.text}
onChangeText={this.handleTextChange()}
style={input}
/>
</View>
);
}
}
[update] By using onBlur instead of onChangeText you can reduce the number of function call