Reusing Component State issue - State always retained for last reference loaded-CodePudding

I tried creating a reusable component in React. Which has a textInput and secure text entry handled in the state of the reusable component. But the state is not getting maintained differently when reusing always the last state is updated,

Issue: If i call the reusable const two times on a single screen or on the next screen in stack. The toggle for secure entry keeps changing for the last field loaded and earlier loaded fields state is lost. i.e., when i click on toggle of Password, text change from hidden to visible or vice-versa happens for Confirm password field.

This is how i call

<View style={styles.inputContainerView}>
                    <InputTextFieldView
                        enteredText={passwordEntered}
                        setEnteredText={setPasswordEntered}
                        title={Constants.registerPasswordPlaceholder} icon={lockIcon}
                        isSecureEntry={true}
                        placeholder={Constants.registerPasswordPlaceholder} />
                </View>
                <View style={styles.inputContainerView}>
                    <InputTextFieldView
                        enteredText={confirmPasswordEntered}
                        setEnteredText={setConfirmPasswordEntered}
                        title={Constants.registerConfirmPasswordPlaceholder} icon={lockIcon}
                        isSecureEntry={true}
                        placeholder={Constants.registerConfirmPasswordPlaceholder} />
                </View>

My component:

const InputTextFieldView = ({ enteredText, setEnteredText, title, icon, isSecureEntry, placeholder }) => {

const [isSecureEntryEnabled, setIsSecureEntryEnabled] = useState(isSecureEntry)
const eyeOpenIcon = require('../../../assets/visibility.png')
const eyeCloseIcon = require('../../../assets/close-eye.png')

useEffect(() => {
    console.log('called')
}, [])

toggleSecureTextEntry = () => {
    console.log('title', title)
    setIsSecureEntryEnabled(!isSecureEntryEnabled)
}

return (
    <View style={styles.fieldsContainerView}>
        <Text style={styles.titleStyle}>{title}</Text>
        <View style={[styles.fieldInputContainerView, {padding: Platform.OS === 'ios' ? 12 : 0}]}>
            <Image source={icon} style={styles.fieldIconView} />
            <TextInput secureTextEntry={isSecureEntryEnabled} style={{ width: isSecureEntry ? '75%' : '85%' }} onChange={() => setEnteredText()} value={enteredText} placeholder={placeholder} />
            {isSecureEntry &&
                <TouchableWithoutFeedback onPress={() => toggleSecureTextEntry()}>
                    <Image source={isSecureEntryEnabled ? eyeOpenIcon : eyeCloseIcon} style={styles.fieldIconView} />
                </TouchableWithoutFeedback>
            }
        </View>
    </View>
)

}

CodePudding user response：

I'm guessing that you are using isSecureEntry as the hook to toggle the password fields? If so, it looks like you are passing the same state to both the password field and the confirm password field. Right now, you essentially have one light switch that controls two different lamps. So you are going to want to have separate separate useState hooks for the password field and confirm password field. Then pass each one to the correct component.

const [passwordSecure, togglePasswordSecure] = useState(true);
const [confirmPasswordSecure, toggleConfirmPasswordSecure] = useState(true);

const togglePasswordField = () => {
  togglePasswordSecure(!passwordSecure)
  };
  
 const toggleConfirmPasswordField = () => {
  toggleConfirmPasswordSecure(!confirmPasswordSecure)
  };

CodePudding user response：

Issue was happening due to TouchableWithoutFeedback. Now used TouchableOpacity and it started to work. Not sure why but it may help someone