CODEWITHSUNDEEP
reactjsreact-native
Emin Aliyev
Emin Aliyev

Reputation: 179

React Native TextInput does pass value to state

i am new in React Native and got issue with TextInput and it does not update whole state. It stores only one value: either Login input or Password input

I created login page with Login and Password TextIput. Here is code my my state and TextInput

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        login: "",
        password: "",

      }
    };
  }

      <View style={styles.inputContainer}>
            <View style={styles.inputEmail}>
              <TextInput
                dafeultValue={this.state.user.login}
                onChangeText={login => this.setState({ user: { login } })}
                placeholder="Enter Email"
                keyboardType="email-address"
              />
            </View>
            <View style={{ ...styles.inputEmail, marginTop: 25 }}>
              <TextInput
                defaultValue={this.state.user.password}
                onChangeText={password => this.setState({ user: { password } })}
                placeholder="Enter Password"
                keyboardType="email-address"
                autoCapitalize="none"
              />
            </View>
          </View>

How can i update my login and password state simultaneously ?

Upvotes: 0

Views: 905

Answers (4)

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 4748

That's because you are not maintaining the state. You need to maintain the state. What you are doing here is losing the data that is previously set in the state while calling to this.setState like:

<View style={styles.inputContainer}>
   <View style={styles.inputEmail}>
      <TextInput
         dafeultValue={this.state.user.login}
         onChangeText={login => this.setState({ user: { ...this.state.user, login } })}
         placeholder="Enter Email"
         keyboardType="email-address"
      />
   </View>
   <View style={{ ...styles.inputEmail, marginTop: 25 }}>
      <TextInput
         defaultValue={this.state.user.password}
         onChangeText={password => this.setState({ user: { ...this.state.user, password } })}
         placeholder="Enter Password"
         keyboardType="email-address"
         autoCapitalize="none"
      />
   </View>
</View>

Hope this works for you.

Upvotes: 0

Andus
Andus

Reputation: 1731

While everyone is giving you the correct answer, I would like to explain more about why your code won't work:

Here's your user state:

user: {
  login: "",
  password: ""
}

Here's your onChangeText in the Email input:

onChangeText={login => this.setState({ user: { login } })}

With this line of code, if you type something the email input box, you are replacing the user state with this:

user: { 
  login 
}

And you now lose your user.password state, and the same thing happens to your password input box.

So to make it work, simply copy everything in the user state by using the spread operator (...this.state.user) before you replace the login/password state by doing:

onChangeText={
  login => this.setState({ 
    user: { 
      ...this.state.user, 
      login 
    } 
  })
}

onChangeText={
  password => this.setState({ 
    password: { 
      ...this.state.user, 
      password 
    } 
  })
}

Upvotes: 0

Hillel SAAL
Hillel SAAL

Reputation: 50

You're setting user to only one value at a time. That is :

login => this.setState({ user: { login } })

Should be :

login => this.setState({ user: { ...this.state.user, login })

Upvotes: 1

Charlie
Charlie

Reputation: 1042

Your are replacing your user object you need to keep whatever its already on your user object and just update the correct property:

onChangeText={login => this.setState({ user: { ...this.state.user, login } })}
onChangeText={password => this.setState({ password: { ...this.state.user, password } })}

Upvotes: 1

Related Questions