"Undefined is not an object" when trying to access state in react native - react-native

Question

So basically I have the input form "Vin Number" here
<InputX
label="Vin Number"
style={{backgroundColor: '#fafafa'}}
autoCapitalize="none"
returnKeyType={'next'}
key="uemail"
onChangeText={text => this.setState({currentTypedVin: text})}
/>
and I am using
onChangeText={text => this.setState({currentTypedVin: text})}
to set the state of currentTypedVin to the text that is added into the input. I am then trying to access that state in the GetReport function here
let vinNumb = this.state.currentTypedVin;
However for some reason I am getting the error "Undefined is not an object (evaluating this.state.currentTypedVin" and I am not completely sure why I am still trying to get this whole state thing on lock. Any help would be appreciated <3
Below is the full code but I wanted to highlight the import parts above
import React, {useEffect, Component} from 'react';
import {View, Text} from 'react-native';
import firebase from '#react-native-firebase/app';
import auth from '#react-native-firebase/auth';
import firestore from '#react-native-firebase/firestore';
import {Section, Container, InputX, ButtonX} from '../../Components';
class HomePageContent extends Component {
state = {
uData: [],
};
componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
if (user) {
var userID = firebase.auth().currentUser.uid;
const db = firebase.firestore();
let userDB = db.collection('Users').doc(userID);
userDB
.get()
.then(doc => {
if (!doc.exists) {
console.log('No such document!');
} else {
let allUsers = [];
let data = doc.data();
let currentUser = data.fName;
let currentTokens = data.tokens;
allUsers.push({
currentUser,
});
this.setState({uData: allUsers});
}
})
.catch(err => {
console.log('Error getting document', err);
});
} else {
// No user is signed in.
}
});
}
render() {
return (
<View key="usdd" style={{alignItems: 'center'}}>
{this.state.uData.map((value, index) => (
<Section key="ussdf">
<Container key="udf">
<Text key="usddfsdf" style={{fontSize: 25}}>
Welcome {value.currentUser}!
</Text>
<Text key="usddfsdf" style={{fontSize: 25, textAlign: 'center'}}>
Begin Searching Below
{'\n'}
{'\n'}
</Text>
<InputX
label="Vin Number"
style={{backgroundColor: '#fafafa'}}
autoCapitalize="none"
returnKeyType={'next'}
key="uemail"
onChangeText={text => this.setState({currentTypedVin: text})}
/>
<ButtonX
dark={true}
color={'#3990FF'}
label={'Request Report'}
onPress={GetReport}
key="savebut"
/>
</Container>
</Section>
))}
</View>
);
}
}
function GetReport() {
let data = null;
let vinNumb = this.state.currentTypedVin;
let xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener('readystatechange', function() {
if (this.readyState === this.DONE) {
const db = firebase.firestore();
let user = firebase.auth().currentUser.uid;
let cityRef = db.collection('Users').doc(user);
let setWithOptions = cityRef.update({
Reports: firebase.firestore.FieldValue.arrayUnion(
JSON.stringify({
VinReport: this.responseText,
}),
),
//....
});
}
});
xhr.open(
'GET',
'https://vindecoder.p.rapidapi.com/decode_vin?vin=' + vinNumb,
);
xhr.setRequestHeader('x-rapidapi-host', 'vindecoder.p.rapidapi.com');
xhr.setRequestHeader('x-rapidapi-key', 'REMOVED');
xhr.send(data);
}
export default HomePageContent;

Answer 1

Because your GetReport function is out of the React class scope. You may take the function into the class
E.g.
class HomePageContent extends Component {
...your implementation
GetReport = () => {
let data = null;
let vinNumb = this.state.currentTypedVin;
...your implementation
}
render() {
return (
...your implementation...
<ButtonX
dark={true}
color={'#3990FF'}
label={'Request Report'}
onPress={this.GetReport}
key="savebut"
/>
...your implementation...
);
}
}
export default HomePageContent;