React Native - Can't find variable - conditional

Question

I'm making an app that looks for a data in the Firebase database, and if the data exists it appears a Text Input. If the data doesn't exist, it shows another Text Input.

//CODE

function Veic({ navigation, route }) {
    const [date, setDate] = useState("");
    const database = firebase.firestore()
    const [selectedValue, setSelectedValue] = useState("");
    const [placa, setPlaca] = useState("");
    const [atv, setAtv] = useState("");
    const [km, setKm] = useState("");
    const [obs, setObs] = useState("");
    const [kmF, setKmF] = React.useState("");
    const { idUser, user, uid } = route.params;
    var auth = firebase.auth();

    useEffect(() => { // the rest of the code doesn't read the "values_id"
        const DocVeic = query(collection(database, "user_veic"),where("email", "==", auth.currentUser?.email),where("kmF", "==", ""));
        getDocs(DocVeic).then((querySnapshot) => {
            let values_id = null;
            querySnapshot.forEach((doc) => {
                values_id = doc.id;
                console.log(`${values_id}`);
            })
        })
    },[])

    function altInfo(){
        const Doc = query(collection(database, "user_veic"),where("email", "==", auth.currentUser?.email),where("kmF", "==", ""));
        getDocs(Doc).then((querySnapshot) => {
            let values = null;
            querySnapshot.forEach((doc) => {
                console.log(`${doc.id} => ${doc.data()}`);
                values = doc.id;
            });
            var transactionUpdate = database.collection("user_veic").doc(values);
                transactionUpdate.update({
                    kmF: kmF,
                })             
        })
    }

    // ADD A DATA
    function addInfo(){          
        database.collection("user_veic").add({
            email: auth.currentUser?.email,
            placa: placa,
            atv: atv,
            km: km,
            obs: obs,
            dataInicial: data_full,
            dataFinal: '',
            kmF: '',
        });
        navigation.navigate('Liber', {idUser: user})
    }

    return (
        <View style={fundoVeic.container}>
            <View style={fundoVeic.perfilUser}>
                <Text style={{color:'#007831',fontWeight:'bold',fontSize:15,height: 40}}>
                    <Image style={fundoVeic.imageEnvel} source={require('../../imagens/envelope.png')}/>
                    <Text style={{color:'#cce4d5'}}>...</Text>{auth.currentUser?.email} 
                </Text>
            </View>


            {values_id === null ?

                <View>
                    <TextInput
                        style={fundoVeic.input}
                        placeholder='Digite a placa do veículo'
                        maxLength={7}
                        placeholderTextColor='#000'
                        onChangeText={txtPlaca => setPlaca(txtPlaca)}
                        value={placa}
                    />
                    <TextInput
                        style={fundoVeic.input}
                        placeholder='Digite a atividade'
                        placeholderTextColor='#000'
                        onChangeText={txtAtv => setAtv(txtAtv)}
                        value={atv}
                    />
                    <TextInput
                        style={fundoVeic.input}
                        keyboardType='numeric'
                        placeholder='Digite o km do veículo'
                        placeholderTextColor='#000'
                        onChangeText={txtKm => setKm(txtKm)}
                        value={km}
                    />
                    <TextInput
                        style={fundoVeic.inputObs}
                        multiline={true}
                        numberOfLines={5} 
                        placeholder='Observação (opcional)'
                        placeholderTextColor='#000' 
                        onChangeText={txtObs => setObs(txtObs)}
                        value={obs}      
                    />
                    <Pressable 
                        style={fundoVeic.button} 
                        onPress={addInfo}
                        >
                        <Text style={fundoVeic.textButton}>Selecionar</Text>
                    </Pressable>
                </View>

            :

                <View>
                    <TextInput
                        keyboardType='numeric'
                        placeholder='Digite o km final do veículo'
                        placeholderTextColor='#000'
                        onChangeText={txtKmF => setKmF(txtKmF)}
                        value={kmF}
                    />
                    <Pressable 
                        onPress={altInfo}
                        >    
                        <Text>Liberar</Text>
                    </Pressable>
                </View>

            }
        </View>
    );
}

export default Veic;

The app has a login. When logging in, enters a screen that will appear a certain text and input (with a condition). The condition: if the variable "kmf", in Firebase, is empty, it shows an input on the screen for the user to put a km. When the user writes the km, the data is updated. The problem is that I am not able to make a condition that reads the "values_id". What is the solution?

Answer 1

values_id is not component state. In fact the variable only exists inside the useEffect function and is not available anywhere else. Add it to the component state with useState.

const [valuesId, setValuesId] = useState<string>(null);
useEffect(() => { 
  // ...
  setValuesId(doc.id);
},[])