Why can't clear value from TextInput in react native using Hooks? - react-native

Question

I am trying to clear user's value from TextInput when user click on button but ican't get it.
I am implementing this demo using Hooks in react-native.
So please help me I am new in hooks with react-native.Thank you in advanced.
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity, Text } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';
import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
const Login = ({ navigation }) => {
const [name, setName] = useState('');
const [password, setPassword] = useState('');
/* useEffect(() => {
console.log("login screen");
setName('');
setPassword('');
}); */
function resetTextInput () {
console.log("reset TextInput");
setName(" ");
setPassword(" ");
}
return (
<View style={styles.mainContainer}>
<Text style={styles.txtTitle}>Login</Text>
<View style={{ marginTop: 80 }}>
<TextInput
placeholder={'Username'}
style={styles.txtInput}
onChangeText={(name) => { setName(name) }}
/>
<TextInput
placeholder={'Password'}
style={styles.txtInput}
secureTextEntry={true}
onChangeText={(password) => { setPassword(password) }}
/>
</View>
<TouchableOpacity style={styles.loginBtn} onPress={()=>{resetTextInput()}}>
<Text style={styles.loginBtnTxt}>Login</Text>
</TouchableOpacity>
</View>
)
}

Answer 1

You can set a null value:
function resetTextInput () {
console.log("reset TextInput");
setName(null);//changed this
setPassword(null);//changed this
}
and the main thing set the state value using TextInput props "value"
<View style={{ marginTop: 80 }}>
<TextInput
placeholder={'Username'}
style={styles.txtInput}
value={name} // set state to value prop
onChangeText={(name) => { setName(name) }}
/>
<TextInput
placeholder={'Password'}
style={styles.txtInput}
secureTextEntry={true}
value={password} // set state to value prop
onChangeText={(password) => { setPassword(password) }}
/>
</View>
This solution will help you.

Answer 2

User empty quotes when reseting values,
function resetTextInput () {
console.log("reset TextInput");
setName('');//changed this
setPassword('');//changed this
}
and give used respective state in value prop.
<TextInput
placeholder={'Password'}
style={styles.txtInput}
secureTextEntry={true}
onChangeText={(password) => { setPassword(password) }}
value={password}
/>
same for first TextInput,