Editing text input with static data on react native

Question

When using text input using this.state it doesn't matter to give value a state variable and you'll able to edit the value, in my case here I am rendering a list and when I specify value of text input I can no longer edit that value because it's outside the state, I don't want to use placeholder to show the value, I need a way to have it as value but also be able to edit that value.

<TextInput
  keyboardType='decimal-pad'
  value={String(roomData.room_attached_dimensions.depth)}
  onChangeText={(value) => this.handleRoomEdit(value)}
/>

Also I don't understand why should I wrap my values with String, it shows nothing otherwise.

My list looks like so

  const attachedRooms = this.state.rooms_attached.map((item, index) => (
      <View key={index}>
        ...
      </View>
   ))

The function does nothing special

  handleRoomEdit = (value) => {
    this.setState({ roomEdit: true, value: value })
  }

Of course I have different inputs I cannot simply give them different names, the data is stored on asyncStorage and even if I edit the array it dont work unless I re mount the damn component

Can you add more code? Like what does this.handleRoomEdit does? It will be better if you can add code for whole component. — Atin Singh
– Atin Singh, Commented May 2, 2020 at 19:55

Atin Singh · Accepted Answer · 2020-05-02 20:03:18Z

2

Okay there's you error. You are not handling your input's value with state. That's why it does not work. You can do something like this -

<TextInput
  keyboardType='decimal-pad'
  value={this.state.value || String(roomData.room_attached_dimensions.depth)}
  onChangeText={(value) => this.handleRoomEdit(value)}
/>

I think this should work. Now you are handling your input's value with state. Or you can use defaultValue to give initial value, but I think react discourages using defaultValue and Value both -

<TextInput
  keyboardType='decimal-pad'
  defaultValue={String(roomData.room_attached_dimensions.depth)}
  value={this.state.value}
  onChangeText={(value) => this.handleRoomEdit(value)}
/>

EDIT:: Also you can use ES6 to make your code clean -

  handleRoomEdit = (value) => {
    this.setState({ roomEdit: true, value }) //use ES6 shorthand //
  }

answered May 2, 2020 at 20:03

Atin Singh

3,6902 gold badges21 silver badges25 bronze badges

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

3 Comments

Youssef Over a year ago

Thanks I think default value is a great suggestion, it worked, I simply cannot specify value as this.state.value because too much variables, it will change all of them

Atin Singh Over a year ago

@usfslk I think you should handle one input with one state value. If you give unique name to them then you can handle all of them using dynamic [name] property. Well i am glad it worked for you. Cheers. :)

Youssef Over a year ago

I know that name trick I just don't need to update the var on frontend this time, all the data handling is executed on the function

Collectives™ on Stack Overflow

Editing text input with static data on react native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related