onChangeText callback function save previous input

Question

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

Answer 1

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