i have textInput and submit button, onPress submit button it checks if name.length is bigger than 2 if its not then i want to change style of TextInput for examle borderColor to be red.
let name = ''
return(<View>
<TextInput onChangeText={(e)=>{name = e}} style={styles.textInput} placeholder='Name and Surname'/>
<TouchableOpacity
onPress={()=>{
if(name.length <= 2){
// What i need to write here to change the TextInput borderColor to red
}
}} >
<Text style={styles.submitButton} >Submit</Text>
</TouchableOpacity>
</View>)
I tried to make nameError - useState variable - and it works but when nameError change it rerender the component and TextInput value is going to be empty, but i want TextInput value to be exacly the same just borderColor to change
let name = ''
let [nameError, setNameError] = useState(false)
return(<View>
<TextInput onChangeText={(e)=>{name = e}}
style={nameError ? {...styles.textInput, borderColor: 'red'} : {...styles.textInput, borderColor: 'green'}}
placeholder='Name and Surname'/>
<TouchableOpacity
onPress={()=>{
if(name.length <= 2){
setNameError(true) //This work and it change borderColor, but it chage value of useState state and component rerender and TextInput is going to be empty but i want to be the same as it was before i clicked submit button not to be empty
}
else{
setNameError(false)
}
}} >
<Text style={styles.submitButton} >Submit</Text>
</TouchableOpacity>
</View>)
Sorry about bad explaining, i dont know english very good.
You have to add a State for name instead of setting it as a variable modifying your code:
// DELETE THIS LINE let name = ''
const [name, setName] = useState(''); //ADD this line and please note I added value={name} to TextInput
let [nameError, setNameError] = useState(false)
return(<View>
<TextInput value={name} onChangeText={(e)=>{setName(e)}}
style={nameError ? {...styles.textInput, borderColor: 'red'} : {...styles.textInput, borderColor: 'green'}}
placeholder='Name and Surname'/>
<TouchableOpacity
onPress={()=>{
if(name.length <= 2){
setNameError(true) //This work and it change borderColor, but it chage value of useState state and component rerender and TextInput is going to be empty but i want to be the same as it was before i clicked submit button not to be empty
}
}} >
<Text style={styles.submitButton} >Submit</Text>
</TouchableOpacity>
</View>)