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

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>
        )
    }

How I can achieve same things when user comes from another screen in login screen? — Raghusingh, Mar 09 '21 at 07:30

score 2 · Accepted Answer · answered Mar 09 '21 at 07:22

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.

score 1 · Answer 2 · edited Mar 09 '21 at 07:15

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,

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

2 Answers2