Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 12111

React Native useState Variable is read-only

$
0
0

I am having a state with a default value of true i.e. const [passShow, setShow] = useState(true). I am trying to show the password when the state is false and hide it when it is true on my textInput. However, I am getting an error that says passShow is read-only. Please see the attached code below

import { View, Text, Image, TextInput, TouchableOpacity, Pressable } from 'react-native'import React, { useState } from 'react'import logo from '../assets/client.png'import { SafeAreaView } from 'react-native-safe-area-context'import { Link } from 'expo-router'const app = () => {    const [ passShow, setShow] = useState(true);  return (<SafeAreaView className='flex-1'><View className="flex-1 items-center justify-between bg-white"><View className='mt-36'><Image source={logo} style={{width: 150, height: 96}}/><Text className="text-xl py-5 mt-2 font-bold text-left w-11/12">Sign In to your Account</Text></View><View className='w-full items-center'><View className="w-11/12 my-2"><Text>Customer ID</Text><TextInput cursorColor={'#cc0000'} className="w-full border-gray-100 border-2 border-solid p-1 mt-2 rounded-lg" /></View><View className="w-11/12 my-2"><Text>Password</Text><TextInput cursorColor={'#cc0000'} secureTextEntry={passShow} className="w-full border-gray-100 border-2 border-solid p-1 mt-2 rounded-lg" /><View className='flex-row justify-between '><Pressable onPress={() => setShow(!passShow)}><Text>Show Password</Text></Pressable><Pressable><Text className="text-themeRed my-2">Reset Password</Text></Pressable></View></View><TouchableOpacity className='bg-themeRed w-11/12 py-3 px-2 items-center rounded-lg mt-3'><Text className='text-white'>Sign In</Text></TouchableOpacity><Link href='/signup' className='flex-row w-11/12 py-3'><Text>Don't have an Account? </Text><Text className='text-themeRed ml-1.5'>Sign Up</Text></Link></View><View className='mb-5 items-center'><Text className='text-gray-400'>24/7 support 076 979 0642 | helpdesk@ctecg.co.za</Text></View></View></SafeAreaView>  )}export default app

I tried using the state variable to try and change the text from 'Show Password' in the following way:

{() => passShow ? <Text>Show Password</Text> : <Text>Hide Password</Text>}

I get the same error


Viewing all articles
Browse latest Browse all 12111

Trending Articles