CODEWITHSUNDEEP
reactjsreact-native
developer
developer

Reputation: 229

Can't edit initial textbox value with react native

I'm passing parameters from one page to the other with react native navigation. The value is able to pass alright, but the issue is when the value is in the textbox it can't be edited. You press a key and it deletes automatically leaving the initial value there.

View Container

const GroupDetailsEditScreen =({setGroupName, groupName, setDescription, description, onSelectImage, ImageSource, displayImage, onSaveEdits, showIndicator})=>(
      <View style={{padding:10, backgroundColor:'white', height:'100%'}}>

      <TextInput value={groupName} onChangeText={setGroupName} style={{marginBottom:10, backgroundColor:'#fafafa'}} mode="flat"  label='Group Name' autoCapitalize = 'none' />
      <TextInput value={description} onChangeText={setDescription} style={{marginBottom:10,backgroundColor:'#fafafa', height:150}} mode="flat" multiline={true} numberOfLines={3} label='Group Description' />
      <Button style={{height:55, margin:10, justifyContent:"center"}}
      icon="save" 
      mode="contained"
      color="#00aae0"
      uppercase="false"
      onPress={() => {onSaveEdits()}} >
    Save Edit
  </Button>

  <ActivityIndicator style={{padding:5, color:'white'}}
                animating={showIndicator}
                size="small"/>

     </View>
    )

export default GroupDetailsEditScreen;

Container Component

class GroupDetailsEditContainer extends Component{
  static navigationOptions = () => ({
    headerStyle: {backgroundColor: '#00aae0'},
    headerTintColor: 'white'
  })

  state = {
    displayImage: false,
    showLoader : false
  };

  setGroupName = (newGroupName) => {
    this.setState({ newGroupName: newGroupName })
    }

  setDescription = (description) => {
    this.setState({ description: description })
    }


render() {
const { navigation } = this.props;
const getGroupID = navigation.getParam('groupID');
const getGroupName = navigation.getParam('groupName');
const getDescription =  navigation.getParam('description');
    return (
    <GroupDetailsEditScreen
      onHandleSelectedValue = {this.handleSelectedValue}
      onSelectImage = {this.handleSelectPhoto}
      ImageSource = {this.state.ImageSource}
      displayImage = {this.state.displayImage}
      setGroupName = {this.setGroupName}
      groupName =     {getGroupName}
      setDescription = {this.setDescription}
      description =  {getDescription}
      showIndicator = {this.state.showLoader}
      onSaveEdits = {this.handleSaveEdits}
    />
    );
  }
}

export default GroupDetailsEditContainer;

Upvotes: 1

Views: 249

Answers (1)

Treycos
Treycos

Reputation: 7492

You should pass the updated value from your parent component to the child one if it exist, and the default value if it does not so that the value is updated with the state :

<GroupDetailsEditScreen
    groupName ={this.state.newGroupName || getGroupName}
    description ={this.state.description || getDescription}
/>

I would recommend deconstructing your state to make it more readable like what you did with your props :

const { description, newGroupName } = this.state

<GroupDetailsEditScreen
    groupName ={newGroupName || getGroupName}
    description ={description || getDescription}
/>

You can also use the defaultValue prop of the TextField instead if you want an uncontrolled input :

<TextInput deafultValue={groupName}
<TextInput defaultValue={description}

Upvotes: 1

Related Questions