CODEWITHSUNDEEP
javascriptreactjsreact-native
Youssef
Youssef

Reputation: 645

Editing text input with static data on react native

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

Upvotes: 0

Views: 1706

Answers (1)

Atin Singh
Atin Singh

Reputation: 3690

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 //
  }

Upvotes: 2

Related Questions