React Native numeric TextInput w/ initial value of null

Question

I am Trying to create a React Native TextInput that only accepts numbers but has an initial value of null. This value then can incremented/decremented by 1. I am having a hard time converting the initial value to null. My thinking is I have to set null to an empty string somehow but not entirely sure how to do so.

Currently I have it if I start the input out with a numeric value everything works, but if I start it out as null, it can't read toString of null. Any help would be appreciated.

   

 export class Measurement extends Component {
state = {
    measurement: null
};

updateMeasurement = measurement => {
    this.setState({
        measurement: +measurement
    });
};

decrement = () => {
    this.setState({
        measurement: this.state.measurement - 1
    });
};

increment = () => {
    this.setState({
        measurement: this.state.measurement + 1
    });
};

render() {
    const styles = getStyles();

    return (
        <View style={styles.container}>
            <View style={styles.input}>
                <TextInput
                    style={styles.inputText}
                    onChange={this.updateMeasurement}
                    keyboardType="numeric"
                    placeholder="Enter #"
                    value={this.state.measurement.toString()}
                />
            </View>
            <View style={styles.buttonWrapper}>
                <Button
                    buttonStyles={styles.decrementButton}
                    onPress={this.decrement}
                    textStyles={styles.decrementButtonText}
                >
                    __
                </Button>
                <Button
                    buttonStyles={styles.incrementButton}
                    onPress={this.increment}
                    textStyles={styles.buttonText}
                >
                    +
                </Button>
            </View>
        </View>
        </BaseType>
    );
}
}

Divyanshu Maithani · Accepted Answer · 2018-11-15 09:15:34Z

2

getMeasurement() {
    return this.state.measurement && this.state.measurement.toString();
}

...

<TextInput
    style={styles.inputText}
    onChange={this.updateMeasurement}
    keyboardType='numeric'
    placeholder='Enter #'
    value={this.getMeasurement()}
/>

edited Nov 15, 2018 at 9:15

Divyanshu Maithani

15.1k2 gold badges39 silver badges48 bronze badges

answered Jan 30, 2018 at 2:15

Jake Haller-Roby

6,4381 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StuffedPoblano Over a year ago

This works! Thank you. I also found another way of doing it, but this way may be more readable. The way I found was by doing this: const value = this.state.measurement === null ? '' : measurement

Collectives™ on Stack Overflow

React Native numeric TextInput w/ initial value of null

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related