CODEWITHSUNDEEP
react-native
Mew Serenity
Mew Serenity

Reputation: 13

Cannot get value from TextInput

I'm currently encounter a particular issue with my Edit page code. The problem is as follow: when the user wants to edit their username (on the application), if the user types the (new) username in the textInput field (called 'name')and clicks on the button (Image button of a pencil) , the application is not changing the username. During debugging, the debugger tells me that name is undefined. below follows the code snippet:

 edit(name) {
let { user } = this.state;
if (user) {
  user.updateProfile({
    displayName: name,   // here i get the error of 'Undefied' 
  }).then(() => {
    // Update successful.0
  }).catch((error) => {
    // An error happened.
  });
}
}

Below follows the full code of the page:

     //constructor
  constructor() {
super();
this.state = {
  user: {},
  fetching: true,
}
this.onAuthStateChanged = this.onAuthStateChanged.bind(this);
  }

componentDidMount() {
//Functionality
this.unsubscribeOnAuthChange = firebase.auth().onAuthStateChanged(this.onAuthStateChanged);
}

componentWillUnmount() {
this.unsubscribeOnAuthChange();
}

onAuthStateChanged(user) {
this.setState({ user, fetching: false })
}

edit(name) {
let { user } = this.state;
if (user) {
  user.updateProfile({
    displayName: name,   
  }).then(() => {
    // Update successful.0
  }).catch((error) => {
    // An error happened.
  });
}
}

ok = () => {
this.props.navigation.navigate('Home');
}

//Styles Account
render() {
let { user, fetching } = this.state;
if(fetching) return null;
return (
  <ScrollView>
    <View style={styles.container}>
      <Text style={styles.text}>Account</Text>
      <View style={styles.row}>
        <Image source={require('./Picture/userImage1.png')}  />
        <TouchableOpacity onPress={() => this.edit(user.name)}>
          <Image source={require('./Picture/pencil.png')} style={styles.pencil} />
        </TouchableOpacity>
      </View>
      <Text style={styles.text1}>Welcome {user.displayName}</Text>

      <TextInput
        style={styles.textInput} placeholder='Username'
        onChangeText={(name) => this.setState({name})}
        underlineColorAndroid='transparent'
        autoCapitalize='none'
      />

      <TouchableOpacity
        style={styles.btn}
        onPress={() => this.ok()}>
        <Text style={{ fontSize: 17, color: '#fff' }}>Ok</Text>
      </TouchableOpacity>
    </View>
  </ScrollView>
);
}
}

Can anyone give me some advice of why i'm getting an 'undefined" error when the user clicks on the image button?

Upvotes: 1

Views: 49

Answers (1)

Paras Korat
Paras Korat

Reputation: 2065

<TextInput
        style={styles.textInput} placeholder='Username'
        onChangeText={(name) => this.setState({name})} //<---Here you set value in state call `name`
        underlineColorAndroid='transparent'
        autoCapitalize='none'
      />

While HERE you are passing the value of object key name

<TouchableOpacity onPress={() => this.edit(user.name)}>

Just simply define name state in this.state and pass the value of state this.state.name in edit function.

Upvotes: 1

Related Questions