Home > Software engineering >  React Native, <TextInput> onChange{(text) => setState(text)} is returning an object instead
React Native, <TextInput> onChange{(text) => setState(text)} is returning an object instead

Time:05-10

<TextInput
  onChange={(text) => {
    setEmail(text);
  }}
  style={styles.textInput}
  placeholder="Email"
/>
<TextInput
  onChange={(text) => setPassword(text)}
  style={styles.textInput}
  secureTextEntry
  placeholder="Password"
/>

I am trying to set the email and password states

const [email, setEmail] = useState("default");
const [password, setPassword] = useState("default");

I need to use them to login with firebase auth, but as soon as I enter a value in the field the states change to objects, and the firebase function only accepts String values, I have tried converting the values to String() while using the set methods but it doesn't work.

What could possibly be wrong here?

Screenshots: Before Values it is String, after entering values they become objects. type of for both states before value is Stringafter entering values they become objects

CodePudding user response:

It's because argument of onChange is an object & not a text.

{ nativeEvent: { eventCount, target, text} }

text is an object not a string.

onChange={(text) => {
    setEmail(text);
  }}

Solution is to use the onChangeText event, which passes the text as string.

<TextInput
  onChangeText={newText => setEmail(newText)}
/>

CodePudding user response:

onChange={(text) => setPassword(text)} change it like this 

onChange={() => setPassword(e.target.value)}

text is a event object

live example sandbox

  • Related