iam new in react native and iam trying to create my first todo list app using react native and js i faced a problem in validation of this app iam using a textInput to take the task as input from the user and iam using onchangetext callback function
<TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text =>{
console.log(text.length)
if(text.length==0){
checkEmpty(true);
setTask(null);
}
else{
checkEmpty(false);
setTask(text);
clearText('');
}
}}/>
and a buttom to create the task
<TouchableOpacity onPress={()=>{
handleAddTask();
}}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
and this is the function handleAddTask
const handleAddTask=()=>{
Keyboard.dismiss();
if(isEmpty==false){
setTaskItems([...taskItems,task])
setTask('');
}
else{
Alert.alert('OOPS!','Todos must contain at least 1 character',[
{text:'Okay', onPress: ()=> console.log('Alert closed')}
]);
setTask('');
}
}
the problem here is that after the application start for the first time : if i didnt enter any input and press on the TouchableOpacity the alert pop up and after i enter any input and add a task and add it successfully when i press the TouchableOpacity again when the input is empty it create empty task to solve the problem i must type any character and delete it and press the TouchableOpacity to make the alert pop up again as the input is empty ... i want to know how to solve this validation problem
I tried playing along with your code and I think the isEmpty state isn't working as expected (you didn't expose that part of code either). You can update your checkEmpty after task is updated.
useEffect(() => {
if(task.length) {
checkEmpty(false)
} else {
checkEmpty(true)
}
},[task])
But ,actually you don't need to assign another state to check if the state is empty, you can just use task.length to check.
const [task, setTask] = React.useState('');
const [taskItems, setTaskItems] = React.useState([])
const handleAddTask=()=>{
// Keyboard.dismiss();
if(task){
setTaskItems(prev => [...prev,task])
setTask('');
}
else{
Alert.alert('OOPS!','Todos must contain at least 1 character',[
{text:'Okay', onPress: ()=> console.log('Alert closed')}
]);
// setTask('');
}
}
return (
<View style={styles.container}>
<TextInput
placeholder={'Write a task'}
value={task}
onChangeText={(text) => setTask(text)}
/>
<TouchableOpacity
onPress={() => {
handleAddTask();
}}>
<View style={{margin : 5}}>
<Text style={{fontSize: 24}}>+</Text>
</View>
</TouchableOpacity>
{taskItems.length ? taskItems.map(t=> <Text style={styles.paragraph}>{t}</Text>) : undefined}
</View>
);
Check on - snack.expo