React Native - Can't find variable - conditional - react-native

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);
},[])