Controlled inputs

Controlled inputs are those which handle all user input on the JavaScript side, most likely in the React state or some other state alternative (see Chapter 5, Store Patterns, for more information). This means that, as the user types, the keystrokes are remembered on both the native system level and the JavaScript level. This, of course, may be ineffective and should not be used in complicated UIs, which appear to be rare in the mobile world.

Do you remember the hello world with your name example from earlier in this chapter? This is a perfect example of controlled input. Let's see it again:

// Chapter 2_ View patterns/Example 6/src/TextInputExample.js

export default class TextInputExample extends React.Component {
    state = {
        name: null
 };

    render = () => (
        <View style={styles.container}>
            {this.state.name && (
                <Text style={styles.text}>
                    Hello {this.state.name}
                </Text>
            )}
            ...
            <TextInput
                style={styles.input}
                onChangeText={name => this.setState({name})}
            />
        </View>
    );
}

We listen on every change in the text (onChangeText) and then immediately update the component state (this.setState({name})). State becomes a single source of truth. We do not need to ask for a native component value. We only care about what is in the state. Hence, we use state to display the new Hello message, along with the typed text.

Let's see how it works in a more complex example. Our task is to create a login form with a login TextInput, password TextInput, and a Button component with the displayed text Login. Upon a user pressing the button, it should log information to our debug console. In a real application, you would pass the login details to the server to verify and then log the user in. You will learn how to do this in Chapter 5, Store Patterns, when we talk about side effects:

// Chapter 2 / Example 9 / src / LoginForm.js

export default class LoginForm extends React.Component {
    // Initial state for our components
    state = {
        login: this.props.initLogin || '', // remembered login or ''
        password: ''
    };
    // Submit handler when the Login button is pressed
    submit = () => {
        console.log(this.state.login);
        console.log(this.state.password);
    };

    render() {
        return (
            <View style={styles.container}>
                <View>
                    <TextInput
                        style={styles.input}
                        placeholder={'Login'}
                        onChangeText={login => this.setState({login})}
                    />
                </View>
                <View>
                    <TextInput
                        style={styles.input}
                        placeholder={'Password'}
                        onChangeText={
                            password => this.setState({password})
                        }
                        secureTextEntry={true} // hide password
                    />
                </View>
                <View>
                    <Button
                        onPress={this.submit}
                        title="Login"
                    />
                </View>
            </View>
        );
    }
}

Please note three important things here:

• It provides the ability to pass remembered login text. The complete feature would require remembering the login on the physical device memory, and so I omitted this for clarity.
• The secureTextEntry prop of TextInput that hides the password behind dots.
• The onPress handler on the button component so that it can do something with the collected data. In this simple example, we just log to the debug console.