React Native TextInput reads value from state when it's in string. But fails when it is in number

Question

I don't know whether it's a bug on react native TextInput or if I am doing something wrong. When I try to show initial value based on state as default value on TextInput it works only for string and not for number.

        this.state = {referralCode: 10}
<TextInput value={this.state.referralCode}  />

This due to some reason does not works and shows empty but it should read the intezer value from the state. As soon as I update the state with some string as initial value the TextInput shows it on initial render.

               this.state = {referralCode: 'Rishav'};

 <TextInput value={this.state.referralCode}

/>

It happens to render the initial state value now because it is in string.

Also, <TextInput value={10}/> fails but <TextInput value={'10'}/> works

Mehran Khan · Accepted Answer · 2019-08-24 07:08:35Z

1

According to documentation . Value props need string . if you want to use number set in state , you can do like this

constructor(props) {
    super(props);
    this.state = {
      referralCode: 10
    };
  }

<TextInput
            onChangeText={referralCode => this.setState(referralCode)}
            value={`${this.state.referralCode}`}
            blurOnSubmit={true}
            autoCapitalize="none"
            returnKeyType="done"
          />

answered Aug 24, 2019 at 7:08

Mehran Khan

3,6561 gold badge15 silver badges12 bronze badges

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

1 Comment

Rishav Kumar Over a year ago

I laugh at myself for this silly mistake. Thankyou : )

Collectives™ on Stack Overflow

React Native TextInput reads value from state when it's in string. But fails when it is in number

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