TextInput is displaying the value react native

Question

Hi in my componentWillMount I set my states like this

componentWillMount(){
    this.timeSheetData().then((timeSheetResponse)=>{
        this.setState({comments:timeSheetResponse.comments});
        this.setState({spentHours:parseInt(timeSheetResponse.hours)});
        alert(this.state.spentHours);

    });
});

In my view

I have the TextInput like this. I can't display the value on the TextInput but I can display the value on Text I don't know why it's happening

<TextInput keyboardType='numeric' onChangeText={(spentHours) =>this.setState({spentHours})} 
                   value={this.state.spentHours} />

spentHours should be a key. when you set the state, you should set it as this.setState({spentHours: spentHours}) — JFAP
– JFAP, Commented Sep 29, 2016 at 7:37
@JanFranzPalngipang thats just shorthand in es6 - take a look here: es6-features.org/#PropertyShorthand. If the var name is the same as the key it can be used like this :) — David
– David, Commented Sep 29, 2016 at 8:29
I got the the answer. I have to use string for displaying the value in TextInput — Vikiesakki
– Vikiesakki, Commented Sep 29, 2016 at 10:20

Tyler · Accepted Answer · 2016-09-29 20:07:26Z

1

Input values need to be strings so you either need to remove parseInt in your componentWillMount method:

this.setState({ spentHours: timeSheetResponse.hours });

or in your template you need to convert the input value to a string with toString():

<TextInput
  keyboardType='numeric'
  onChangeText={spentHours => this.setState({ spentHours })} 
  value={this.state.spentHours.toString()}
/>

answered Sep 29, 2016 at 20:07

Tyler

1,6623 gold badges18 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

TextInput is displaying the value react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related